来源:自学PHP网 时间:2018-02-08 10:48 作者: 阅读:次
[导读] CSS will-change 属性用于告诉浏览器某个元素上会发生哪些变化,以便浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。...
CSS will-change 属性用于告诉浏览器某个元素上会发生哪些变化,以便浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 通过 使用
例如下面使用 .will-change:active { will-change: transform; transition: transform 0.3s; transform: scale(1.5); } 上面的代码中,是在一个变化已经发生的时候,才去通知浏览器。 一个元素要达到 .will-change { transition: transform 0.3s; } .will-change:hover { will-change: transform; } .will-change:active { transform: scale(1.5); } 浏览器会尽可能的对元素将要发生的变化进行优化。浏览器为了释放内存会尽可能的移除一些优化操作。在一个元素上直接使用 .will-change { will-change: transform; transition: transform 0.3s; } .will-change:hover { transform: scale(1.5); } 上面的代码会增加内存的使用,因为我们强制浏览器认为元素会在所有的时间里都会发生改变。我们可以在元素的父元素上制作鼠标悬停事件来解决这个问题: .will-change-parent:hover .will-change { will-change: transform; } .will-change { transition: transform 0.3s; } .will-change:hover { transform: scale(1.5); } 上面的代码会在鼠标进入父元素时添加优化操作,并在鼠标移出时移出它。但是这意味着,每次鼠标进入父容器的时候,浏览器都会期待在元素上发生一次改变。 当你使用完 例如有一个class为 .element { transition: transform 0.5s; } .element.clicked { transform: scale(1.5); } 如果我们需要通知浏览器来响应优化元素点击后的效果,我们可以像下面这样做: var el = document.querySelector('.element'); el.addEventListener('mouseenter', hintBrowser); el.addEventListener('animationEnd', removeHint); function hintBrowser() { this.style.willChange = 'transform'; } function removeHint() { this.style.willChange = 'auto'; } 上面的代码只是一个片段,你需要添加必要的javascript来在元素被点击的时候添加相应的 官方语法will-change: auto | <animateable-feature># // 其中#表示你可以使用多个animatable-features,各个值之间使用逗号来分隔。 <animateable-feature> = scroll-position | contents | <custom-ident> 参数:
示例代码will-change: contents; will-change: scroll-position; will-change: opacity; /* 多个值 */ will-change: contents, transform; will-change: scroll-position, opacity; 浏览器支持CSS3 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com