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

曾经终败给现在 2022-11-27 04:26 186阅读 0赞

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][stated by Mozilla_s MDN], `will-change` should be used as a last resort.

如[Mozilla的MDN所述][stated by Mozilla_s 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][Sara Soueidan_s great article] on the topic.

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

Thanks for reading!

谢谢阅读！

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-will-change][https_www.digitalocean.com_community_tutorials_css-will-change]

js更改css属性

[stated by Mozilla_s MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
[Sara Soueidan_s great article]: https://dev.opera.com/articles/css-will-change-property/
[https_www.digitalocean.com_community_tutorials_css-will-change]: https://www.digitalocean.com/community/tutorials/css-will-change