CSS3中不熟悉的属性3:will-change
来源:互联网 发布:网页版淘宝的微淘 编辑:程序博客网 时间:2024/05/20 00:16
will-change属性可以提前通知浏览器我们要对元素做什么动画,这样浏览器可以提前准备合适的优化设置。这样可以避免对页面响应速度有重要影响的昂贵成本。元素可以更快的被改变,渲染的也更快,这样页面可以快速更新,表现的更加流畅。
举个例子,当对于素使用 CSS 3D变形时,元素及其内容可以在合成到页面之前被创建到我们之前说的layer。然而把元素放到layer中是个昂贵的操作,这将会导致变形动画延迟一个课件的瞬间,也就是flicker
为了避免这种延时,我们可以在发生之前通知浏览器,这样浏览器会有一定的时间去准备这些变化,当发生的时候layer已经准备好了,这样动画酒会很流畅,不会闪屏
使用will-change提示浏览器关于即将发生的变形十分简单,添加个CSS属性就行
will-change: transform;
也可以告诉浏览器要改变元素的滚动条位置,或者多个要变化的属性,写下属性的名字就行,也可以写多个,逗号隔开
will-change: transform, opacity;
声明了元素即将进行的变化会让浏览器在渲染页面时做更好的决定,这明显比之前说的3D hacks要好。
will-change顾名思义,通知浏览器即将发生的变化,而不是正在发生的变化。使用will-change,我们要求浏览器重点照顾我们声明的元素,为了这个浏览器需要一定的时间来组织优化操作,这样当变化发生的时候,优化才能没有延迟的作用到元素
在变化前立即为元素添加will-change几乎没有作用,可能还不如不设置,因为会导致新的layer创建
.element:hover { will-change: transform; transition: transform 2s; transform: rotate(30deg) scale(1.5);}
这样的设置就没什么用,我们需要给浏览器足够的时间,下面这样就是有用的,感受一下
.element { /* style rules */ transition: transform 1s ease-out;}.element:hover { will-change: transform;}.element:active { transform: rotateY(180deg);}如果一定要hover的时候,也有技巧.element { transition: opacity .3s linear;}/* declare changes on the element when the mouse enters / hovers its ancestor */.ancestor:hover .element { will-change: opacity;}/* apply change when element is hovered */.element:hover { opacity: .5;}
其实核心思想就是让浏览器有时间去准备
阅读全文
0 0
- CSS3中不熟悉的属性3:will-change
- css3 will-change
- CSS3中不熟悉的属性2:display:box和display:flex的区别
- CSS3中不熟悉的属性1:box-pack和box-align
- CSS WILL-CHANGE 属性
- CSS3笔记——will-change
- CSS页面渲染优化属性will-change
- CSS页面渲染优化属性will-change
- CSS页面渲染优化属性will-change
- CSS页面渲染优化属性will-change
- CSS页面渲染优化属性will-change
- CSS页面渲染优化属性will-change
- html中的一些不熟悉的属性
- 那些你不熟悉的html元素属性
- 关于CSS“可变属性”(will-change),你需要知道所有的事情
- IView中on-change属性的使用
- WEB开发中不熟悉的知识点
- 一些常用而你却不熟悉的布局属性
- mysql修改表结构和数据库备份还原
- 在HTML中使用CSS样式的几种方式
- 信号的捕捉
- 人脸识别openface
- 远程桌面有时无法复制文件的问题
- CSS3中不熟悉的属性3:will-change
- 棋盘拼接问题
- java关键字switch
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- Settings.db在android6.0上的变化
- redis学习(1)python连接redis
- Spring 中的BeanUtils与apache中的BeanUtils用法与比较
- 40个Java多线程问题总结
- 数组指针和指针数组的区别