动态添加将在单击/悬停jQuery时更改的值

Question

在此article中，作者声明不需要永久存储样式将改变样式的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");
      });

我将很高兴听到关于如何有效使用style will-change的建议

Answer 1

你应该特别注意你链接的文章中的这一段(重点是我的)

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

因此，如果您计划对hover设置某种效果，则在hover上设置will-change属性不会产生任何明显的差异