CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

CSS里的will-change属性使用教程

发布时间:『 2017-09-07 16:21』  博客类别:编程语言  阅读(284) 评论(0)

will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。

举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一个课件的瞬间,也就是flicker。

为了避免这种延时,我们可以在发生之前通知浏览器,这样浏览器会有一定的时间去准备这些变化,当发生的时候layer已经准备好了,这样动画酒会很流畅,不会闪屏。使用will-change提示浏览器关于即将发生的变形十分简单,添加个CSS属性就行。

will-change: transform;

也可以告诉浏览器要改变元素的滚动条位置,或者多个要变化的属性,写下属性的名字就行,也可以写多个,逗号隔开。

will-change: transform, opacity;

声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定,这明显比之前说的3D hacks要好。

will-change属性的作用

will-change属性的作用是开发人员可以提前告诉UA,一个元素可能会发生什么样的变化。这样可以让UA有机会提前优化如何处理这个元素,提前做一些可能比较耗资源的动画的准备工作,在动画真正开始前完成准备。可以参考w3c的官方文档

不幸的是,will-change不仅仅只是“通知UA”,还做了很多其它事情,其中包括变更了元素的层叠顺序(类似z-index)。

使用 will-change 会让我们又回到了旧时的使用IE编程的时代。在那时,我开发网页是需要先写出代码,然后看看它们在IE里是什么样子,然后开始打补丁。使用will-change属性会产生同样的结果。任何时候使用这个属性,你都需要检查will-change在浏览器里的作用效果是否如你所愿。

will-change的例子

本示例展示了两个方块在同一位置(x/y)时反生的状况。

HTML代码如下:

<div class="box box1"></div>
<div class="box box2"></div>

CSS代码如下:

.box {
    height:100px;
    width:100px;
} 
.box1 {
    background:orange;
    will-change:transform;
} 
.box2 {
    background:teal;
    margin-top:-100px;
}

支持 will-change 属性的浏览器显示黄色方块在上面,而不支持这个属性的浏览器显示绿色方块在上面。


这种现象跟元素层叠顺序(类似z-index)混乱有关,但是因为要使用 will-change 属性,就必须要接受这种混乱的现实。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   CSS     will-change  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有