javascript - 动态添加一个值 will-change on click/hover jQuery

Question

在此article ，作者表示不需要永久存储style will-change css样式文件will-change: transform;，应该使用javascript动态添加

А也是示例脚本的作者:

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 的建议

Answer 1

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

Give it sufficient time to work. This property is intended as a method for authors to let the user-agent know about properties that are likely to change ahead of time. Then the browser can choose to apply any ahead-of-time optimizations required for the property change before the property change actually happens. So it is important to give the the browser some time to actually do the optimizations. Find some way to predict at least slightly ahead of time that something will change, and set will-change then.

因此，如果您打算在悬停时 产生某种效果，将will-change 属性设置为悬停 并不是将产生任何明显的变化