According to the information provided in this source, it is recommended not to permanently store the style "will-change: transform;" in a CSS file, but instead add it dynamically using JavaScript.
The author also presents an example script:
var el = document.getElementById('element');
// Apply will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
// Define the properties that are likely to change during animation keyframes
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}
I am wondering if I can implement this script and if it would be beneficial for me?
$('.my_class')
.mouseenter(function() {
$(this).css("will-change", "transform");
})
.mouseleave(function() {
$(this).removeAttr("style");
});
I welcome any suggestions on how to effectively utilize the "will-change" style property.