2018-05-03|2018-05-03 will-change
当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿。而CSS属性will-change为web开发者提供了一种告知浏览器该元素会有哪些变化的方法,这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。
?不要像下面这样直接写在默认状态中,因为will-change会一直挂着:
.will-change { will-change: transform;
transition: transform 0.3s;
}
will-change
:hover { transform: scale(1.5);
}
【2018-05-03|2018-05-03 will-change】??可以让父元素hover的时候,声明will-change,这样,移出的时候就会自动remove,触发的范围基本上是有效元素范围
.will-change-parent:hover .will-change { will-change: transform;
}
.will-change { transition: transform 0.3s;
}.will-change:hover { transform: scale(1.5);
}
推荐阅读
- 迷茫是人生常态
- 无故.
- 基于爱,才会有“愿望”当“要求”。2017.8.12
- (全员向连载)云间当铺(一)
- 前任三,让我笑了
- 修身当如水
- 不好好读书就要嫁过去当少奶奶()
- 问(现在多少家产相当于30年前的万元户())
- 遇到不正当请求怎么办
- 当我不想坚持时