**will chang **
CSS3 will-change
属于web标准属性,虽然目前还是草案阶段,但出现已经有些时日了,兼容性这块Chrome/FireFox/Opera都是支持的
will change的作用:
1.会通知UA,元素会发生怎么样的变化,提前做一些比较耗费资源的动画的准备工作,在动画真正开始前完成准备。
2.这个属性会变更元素的层叠顺序,让我们任何时候使用时候都要检查will change 在浏览器的作用效果是否如你所愿
那我们应该如何去使用呢?—遵循最小化影响原则,
1.静态图层和动画图层在同一层级的时候,会产生抖动,这时候可以使用will change 改变其效果
2.移动端尽量少用,因为会引起cpu内存问题,pc端适量去用,最好在优化后可以在动画完成取消优化,如果动画连续且使用的不多,可以使用will-change
不要这样直接写在默认状态中,因为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);
}
如果使用JS添加will-change
, 事件或动画完毕,一定要及时remove
. 比方说点击某个按钮,其他某个元素进行动画。点击按钮(click),要先按下(mousedown)再抬起才出发。因此,可以mousedown
时候打声招呼, 动画结束自带回调,于是(示意,不要在意细节):
dom.onmousedown = function() {
target.style.willChange = 'transform';
};
dom.onclick = function() {
// target动画哔哩哔哩...
};
target.onanimationend = function() {
// 动画结束回调,移除will-change
this.style.willChange = 'auto';
};
如何理解willchange可以增强页面渲染性能呢?
我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧,于是卡顿。而will-change
则是真正的行为触发之前告诉浏览器:“浏览器同学,我待会儿就要变形了,你心理和生理上都准备准备”。于是乎,浏览器同学把GPU给拉上了,从容应对即将到来的变形。
will change的属性值
auto
就跟width:auto
一样,实际上没什么卵用,昨天嘛,估计就是用来重置其他比较屌的值。
scroll-position
告诉浏览器,我要开始翻滚了。
contents
告诉浏览器,内容要动画或变化了。
顾名思意,自定义的识别。非规范称呼,应该是MDN自己的称呼,以后可能会明确写入规范。比方说animation
的名称,计数器counter-reset
, counter-increment
定义的名称等等。
上面展示了2个例子,一个是transform
一个是opacity
,都是CSS3动画常用属性。如果给定的属性是缩写,则所有缩写相关属性变化都会触发。同时不能是以下这些关键字值:unset
, initial
, inherit
, will-change
, auto
, scroll-position
, 或 contents
.
可动画的一些特征值。比方说left
, top
, margin
之类。移动端,非transform
, opacity
属性的动画性能都是低下的,所以都是建议避免使用left
/top
/margin
之流进行唯一等。但是,如果你觉得自己是margin
属性奶大的,非要使用之,试试加个will-change:margin
说不定也会很流畅(移动端目前支持还不是很好)。
就目前而言,使用的基本上都是
.example {
will-change: transform;
}