js更改css属性_CSS会更改属性：何时以及何时不使用它-CSDN博客

js更改css属性

The will-change CSS property is commonly misunderstood or not used correctly, in this short post I will demystify the property so you can make your CSS animations and transitions as performant as possible.

will-change CSS属性通常被误解或使用不正确，在这篇简短的文章中，我将神秘化该属性，以便您可以使CSS动画和过渡效果更好。

什么是意志改变？ (What is will-change?)

In a nutshell, the will-change property is a way to tell the browser ahead of a time which properties and elements are likely to be manipulated. Using this information, the browser can make optimizations before they are needed which can result in a smoother experience.

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

An example of this would be if we were applying a transform on an element we could inform the browser of this like so:

这样的一个例子是，如果我们在元素上应用transform ，我们可以像这样通知浏览器：

will-change: transform;

You can also declare multiple values like so:

您还可以像这样声明多个值：

will-change: transform, opacity;

意志改变的价值观 (will-change Values)

will-change can take four possible values:

will-change可以采用四个可能的值：

auto - browser will apply the optimizations
自动 -浏览器将应用优化
scroll-position - indicates that the author expects to animate or change the scroll position of the element in the near future
scroll-position-表示作者希望在不久的将来对元素进行动画处理或更改其滚动位置
contents - indicates that the author expects to animate or change something about the element’s contents in the near future.
contents-表示作者希望在不久的将来对元素的内容进行动画处理或更改。
custom-indent - indicates that the author expects to animate or change the property with the given name on the element in the near future.
custom-indent-指示作者希望在不久的将来对元素上的给定名称进行动画处理或更改。

The value we’re going to focus on is custom-indent i.e. transform, opacity, etc.

我们要关注的值是custom-indent即transform ， opacity等。

何时使用会改变？ (When to use will-change?)

As stated by Mozilla’s MDN, will-change should be used as a last resort.

如Mozilla的MDN所述， will-change不得已的方法用作最后的选择。

If we abuse the usage of will-change, we will suffer performance hits which is the exact opposite of what we want. If your animations/transitions are smooth and crisp then there is no need to use will-change. The browser is already making optimizations without the use of will-change.

如果我们滥用will-change的用法，我们将遭受绩效打击，这与我们想要的完全相反。如果您的动画/过渡平滑流畅，则无需使用will-change 。浏览器已经在不使用will-change情况下进行优化。

不要这样！ (Don’t do this!)

A common mistake people make when using will-change is this:

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

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

This is doing more harm than good, will-change is future tense so it shouldn’t be applied when the animation is happening.

这弊大于利， will-change是未来时态，因此在动画发生时不应应用。

A better use of will-change here would be to put the will-change on the parent of my-element like so:

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

.parent-element:hover {
  will-change: opacity;
}

.my-element:hover {
  transition: opacity .25s ease-in-out;
}

This lets the browser know ahead of time to optimize for this change. Remember to use this as a last resort if your animations are janky or flickering.

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

消除意志改变 (Removing will-change)

It is recommended by Mozilla to remove will-change after the element is done changing. This is why it’s also recommended to set will-change via JavaScript so you can remove it. If will-change is set in the CSS stylesheet, it can not be removed.

Mozilla建议在元素will-change后删除will-change 。这就是为什么还建议您通过JavaScript设置will-change以便将其删除的原因。如果在CSS样式表中设置了will-change ，则无法将其删除。

Code-wise this is quite simple and looks like this:

在代码方面，这非常简单，看起来像这样：

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener('animationend', removeChange)

const addWillChange = () => {
  this.style.willChange = 'opacity'
}

const removeChange = () => {
  this.style.willChange = 'auto'
}

The code above is very simple, we’re adding our will-change to the parent-element when it is hovered then when the animationend event is fired we then remove our will-change.

上面的代码非常简单，当鼠标悬停时，我们will-change添加到parent-element ，然后当animationend事件触发时，我们将删除will-change 。

Setting will-change in a stylesheet can make sense in some circumstances. A circumstance such as this would be an element that is likely to be interacted with multiple times, this could be something like a ripple effect on a button or a sidebar sliding out. Generally, there should only be a handful of will-change properties in a stylesheet, the rest should ideally be set through JavaScript.

在某些情况下，在样式表中设置will-change可能很有意义。诸如此类的情况将是可能多次交互的元素，这可能类似于按钮上的波纹效果或侧栏滑出。通常，样式表中应该只有少数的will-change属性，理想情况下，其余的应该通过JavaScript进行设置。

结论 (Conclusion)

This was a short little introduction to will-change, and if you’re looking to dive deeper I would really recommend checking out Sara Soueidan’s great article on the topic.

这是关于will-change的简短介绍，如果您想深入了解，我真的建议您查看Sara Soueidan关于该主题的精彩文章。

Thanks for reading!

谢谢阅读！