will-change
目的:
让GPU分担CPU的工作,从而优化和分配内存,告知浏览器做好动画的准备。
背景:
注意事项:
1,will-change
虽然可以加速,但是,一定一定要适度使用;
2,使用伪元素,独立渲染:
不要这样直接写在默认状态中,因为will-change
会一直挂着:
.a {
will-change: transform;
transition: transform 0.3s;
}
.a:hover {
transform: scale(1.5);
}
解决方案:
可以让父元素hover的时候,声明will-change
,这样,移出的时候就会自动remove
,触发的范围基本上是有效元素范围。
.a-parent:hover .a {
will-change: transform;
}
.a {
transition: transform 0.3s;
}
.a:hover {
transform: scale(1.5);
}
3,如果使用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';
};
官方:https://developer.mozilla.org/en/docs/Web/CSS/will-change ,给出的示例:
var el = document.getElementById('element'); // Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint); function hintBrowser() {
// The optimizable properties that are going to change
// in the animation's keyframes block
this.style.willChange = 'transform, opacity';
} function removeHint() {
this.style.willChange = 'auto';
}
will-change的更多相关文章
- 代码的坏味道(10)——发散式变化(Divergent Change)
坏味道--发散式变化(Divergent Change) 发散式变化(Divergent Change) 类似于 霰弹式修改(Shotgun Surgery) ,但实际上完全不同.发散式变化(Dive ...
- [LeetCode] Coin Change 硬币找零
You are given coins of different denominations and a total amount of money amount. Write a function ...
- input事件与change事件
输入框的change事件: 必须等到输入框失去焦点的时候才会触发,鼠标在空白的地方点一下: 输入框的input事件: 在输入内容变化的同时,实时的触发,不需要等到失去焦点.
- Change the Target Recovery Time of a Database (SQL Server) 间接-checkpoints flushcache flushcache-message
Change the Target Recovery Time of a Database (SQL Server) 间接checkpoints flushcache flushcache-mes ...
- Change Line Type in OpenCascade
Change Line Type in OpenCascade eryar@163.com 关键字KeyWords:OpenCascade,Line Aspect, Line Type 在OpenCa ...
- 华硕笔记本U盘启动系统/WinPE报错。Windows failed to start. A Recent hardware or software change might be the cause.
最近在整一台华硕笔记本,大概有5年寿命了吧,质量还行,由于系统出了问题,打算用自制U盘WinPE进去修复一下.按照个人经验,在主板设置里启用了USB启动选项,并且设置USB启动顺序为第一个,可是进系统 ...
- You cannot change a partition into an extended one or vice versa Delete it first
在Linux扩展LVM时,使用fdisk创建分区时,在磁盘上新建扩展分区(逻辑分区),修改分区格式,指定分区类型为8e时,报错"You cannot change a partition i ...
- [WPF系列]基础 Listening to Dependency Property change notifications of a given Element
I want to share this great post from Anoop that shows a easy way to add a notification system to dep ...
- 鼠标的change事件
原本想着在<input>输入输入框中添加change事件,来实现对输入内容的限定. 当人们在使用时跟多的会直接去点击完成.所以完成按钮的点击事件会和change事件产生 冲突,所以我把验证 ...
- Fold Change和t分布
基因表达谱数据 基因表达谱可以用一个矩阵来表示,每一行代表一个基因,每一列代表一个样本(如图1).所有基因的表达谱数据在“gene_exp.txt”文件中存储,第一列为基因的entrez geneid ...
随机推荐
- 第23章、OnFocuChangeListener焦点事件(从零开始学Android)
在Android App应用中,OnFocuChangeListener焦点事件是必不可少的,我们在上一章的基础上来学习一下如何实现. 基本知识点:OnFocuChangeListener事件 一 ...
- Oracle GoldenGate (ogg) 11.2.1.0.20 是最后一个支持oracle db 10g的 ogg版本号
參考原文: Oracle GoldenGate 11.2.1.0.22 Patch Set Availability (Doc ID 1669160.1) 该文章不做翻译,只摘录当中有价值的信息,例如 ...
- Guid.NewGuid().ToString()得几种格式显示
1.Guid.NewGuid().ToString("N") 结果为: 38bddf48f43c48588e0d78761eaa1ce6 2.Guid.NewGuid ...
- 转 redis使用场景 简介
Redis实战(五) 聊聊Redis使用场景 发表于 2016-11-21 | 数据存储 | Redis 文章目录 1. 使用场景说明 1.1. 计数器 1.2. 排行榜 1.3. 用于存储时间戳 1 ...
- MYSQL服务器复制配置
首先声明:此文是在失去U盘极度郁闷的时候写的,有些零散,估计也有错误.欢迎大家指出 MYSQL服务器复制配置 这是根据我之前看的MYSQL复制的文档然后自己亲自实验的过程.配置的功能比较简单. ...
- AppModify修改app.config
public class AppModify { /// <summary> /// 依据连接串名字connectionName返回数据连接字符串 /// </summary> ...
- android线程控制UI更新(Handler 、post()、postDelayed()、postAtTime)
依照以下的理解就是handler与ui线程有一定的关联能够由于更新界面仅仅能在主线程中全部更新界面的地方能够在接受消息的handleMessage那里还有更新界面能够在handler.port(new ...
- 进程控制函数(3)-getsid()和setsid()获取当前会话和建立新会话
pid_t setsid(void) 1.调用进程不能是进程组组长,该进程变成新会话首进程(session header) 2.该进程成为一个新进程组的组长进程. 3.需有root权限(ubuntu不 ...
- 每日英语:Vender Assault Shines Ugly Light on China's Urban Enforcers
The sudden death of a street vendor in Hunan province on Wednesday provoked outrage chengguan, or ur ...
- codeblocks 配置OpenGL
一.选择编译器环境 这里选择codeblocks,带MinGW的版本. 二.下载glut工具包 网址:http://pan.baidu.com/s/1eQriTQM 三.配置glut 解压缩下载的gl ...