dynamically add a value will-change on click/hover jQuery

Question

In this article, the author states do not need permanently store style will-change css style file will-change: transform;, and should be added dynamically using javascript

Аlso the author the example script:

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';
}

Can I use this script, and whether he to be useful to me?

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

I will be glad to hear suggestions on how to make effective use of style will-change

Answer 1

You should pay special atention to this paragraph in the article that you link (the emphasis is mine)

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.

So, if you are planning to make some kind of effect on hover, setting the will-change property on hover isn't going to make any visible difference