1

在本文中，作者声明不需要永久存储样式将更改css样式文件will-change: transform;，而应使用javascript动态添加

Аlso 作者示例脚本：

var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

我可以使用这个脚本，他是否对我有用？

      $('.my_class')    
      .mouseenter(function() {
        $(this).css("will-change", "transform");
      })
      .mouseleave(function() {
        $(this).removeAttr("style");
      });

我很高兴听到有关如何有效利用风格的建议will-change

4

1 回答 1

3

您应该特别注意您链接的文章中的这一段（重点是我的）

给它足够的工作时间。此属性旨在作为作者让用户代理了解可能提前更改的属性的一种方法。然后，浏览器可以选择在属性更改实际发生之前应用属性更改所需的任何提前优化。因此，重要的是要给浏览器一些时间来实际进行优化。找到某种方法，至少稍微提前预测某事会发生变化，然后设置 will-change。

因此，如果您打算对 hover产生某种效果，则将will-change属性设置为hover不会产生任何明显的差异

于 2016-11-21T21:44:25.843 回答