品易云推流 关闭
文章 > css教程 > CSS中will-change的注意点

CSS中will-change的注意点

css

头像

小妮浅浅

2021-04-21 17:00:271065浏览 · 0收藏 · 0评论

1、说明

样式表中不使用will-change。

给will-change足够的时间来发挥它的作用。

用于针对超特殊变化(例如,left,opacity等)

如有必要,可在JavaScript中使用(添加和删除)

修改后,删除will-change。

不要同时声明太多属性。

别用太多的元素。

不要把资源浪费在停止变化的要素上。

2、实例

var el = document.getElementById('element');
 
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
 
function hintBrowser() {
    // 填写上那些你知道的,会在 CSS 动画中发生改变的 CSS 属性名们
    this.style.willChange = 'transform, opacity';
}
 
function removeHint() {
    this.style.willChange = 'auto';
}

以上就是CSS中will-change的注意点,希望对大家有所帮助。更多编程基础知识学习:python学习网

关注公众号

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图 底部广告图按钮