will-changecss属性经常被误解或没有正确使用，在这篇简短的帖子中，我将揭开该属性的神秘面纱，这样你就可以让你的css动画和过渡尽可能地具有表现力。

什么是意志改变？

简而言之，`will-change‘属性是一种提前告知浏览器哪些属性和元素可能被操作的方法。使用这些信息，浏览器可以在需要之前进行优化，从而获得更流畅的体验。

这方面的一个例子是，如果我们在一个元素上应用一个‘转换’，我们可以这样通知浏览器：

1will-change: transform;

您还可以声明多个值，如下所示：

1will-change: transform, opacity;

will-change Values

will-change可以接受四个可能的值：

• 自动 -浏览器将应用优化
• 滚动位置 -表示作者希望在不久的将来将元素的滚动位置动画化或更改
• Contents -表示作者希望在不久的将来对元素的内容进行动画处理或更改。
• 自定义缩进 -表示作者希望在不久的将来以动画形式或更改元素上给定名称的属性。

我们要关注的值是Custom-indent，即Transform、opacity等。

何时使用Will-Change？

正如mozilla的MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)，所说，`will-change‘应该被用作最后的手段。

如果我们滥用will-change的用法，我们将遭受性能打击，这与我们想要的完全相反。如果你的动画/过渡是平滑和清晰的，那么就没有必要使用will-change。浏览器已经在进行优化，而没有使用will-change。

不要这样！

人们在使用will-change时常犯的一个错误是：

1.my-element:hover {
2  will-change: opacity;
3  transition: opacity .25s ease-in-out;
4}

这是弊大于利，‘will-change’是将来时，所以不应该在动画发生时使用它。

此处will-change‘的更好用法是将will-change’放在my-element的父项上，如下所示：

1.parent-element:hover {
2  will-change: opacity;
3}
4
5.my-element:hover {
6  transition: opacity .25s ease-in-out;
7}

这可以让浏览器提前知道，以便针对此更改进行优化。如果您的动画不稳定或闪烁，请记住使用此选项作为最后的手段。

移除Will-Change

Mozilla建议在元素更改完成后移除will-change。这也是为什么我们也建议通过JavaScript设置will-change，这样就可以将其移除。如果在css样式表中设置了will-change，则不能删除它。

代码方面，这非常简单，如下所示：

 1const el = document.querySelector('.parent-element')
 2el.addEventListener('mouseenter', addWillChange)
 3el.addEventListener('animationend', removeChange)
 4
 5const addWillChange = () => {
 6  this.style.willChange = 'opacity'
 7}
 8
 9const removeChange = () => {
10  this.style.willChange = 'auto'
11}

上面的代码非常简单，当它悬停时，我们将will-change添加到parent-element中，然后在激发Animationend事件时删除我们的will-change。

在样式表中设置‘will-change’在某些情况下是有意义的。这样的情况可能是一个元素可能会多次交互，这可能是按钮上的涟漪效应或侧边栏滑出。通常，一个样式表中应该只有几个‘will-change’属性，其余的最好通过JavaScript来设置。

总结

这是对‘意志变化’的一个简短的介绍，如果你想深入探讨这个问题，我真的推荐你去看看Sara Soueidan关于这个话题的伟大的article]。

感谢您的阅读！