解决transition动画与display冲突的几种方法

demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐藏display:none;点击Reset按钮后,首先显示蓝色区域display:block,然后透明度逐渐恢复至1,代码如下:

 1 var btn1 = $("#testbtn1");
 2 var btn2 = $("#testbtn2");
 3 var container = $("#container");
 4 
 5 btn1.on('click', function(e) {
 6     container.css({
 7         "transition": "opacity 1s",
 8         "-webkit-transition": "opacity 1s",
 9         "-moz-transition": "opacity 1s",
10         "-o-transition": "opacity 1s",
11         "-ms-transition": "opacity 1s",
12         "opacity": "0.1"
13          });
14     setTimeout(function() {
15         container.css("display", "none");
16     }, 1000);
17 });
18 btn2.on('click', function(e) {
19     container.css("display","block");
20     container.css("display");
21     container.css("opacity","1");
22 });

上述代码中第20行看起来很奇怪,可能会有人疑问这句代码的作用,事实是,如果没有这句代码,在点击Reset后得到的效果是:蓝色区域瞬间显示出来,并没有透明度改变的过渡效果。

至于产生这种现象的原因,深层次的机制我也尚未搞明白,暂时理解为CSS3的transition过渡不支持display的改变,直接操作display会破坏transition的动画,所以在第14行通过setTimeout将opacity的transition动画与display的操作分隔。

而第20行代码的目的,我是这样理解的,浏览器的UI线程在处理UI操作时,将多个css属性的set操作加入在同一个tick中处理(关于浏览器处理tick机制,请参考http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering?utm_source=infoq&utm_medium=popular_links_homepage),也就是说,如果不插入第20行代码,第19行和第21行的css属性set操作将会被同时执行,所以将会得到瞬间显示出来的效果;第20行代码其实是css属性的get操作,我的理解是,如果在两个css属性的set操作中间插入get操作,UI线程在处理的时候将会按顺序执行,display的操作和opacity的操作在不同的tick中被执行,这样便的到我们想要的过渡效果。

第二种方法,由于display对transition的破坏作用,还有另外一种方法来hack,没有错,就是setTimeout!(这货完全是js的大杀器!)代码如下:

1  btn2.on('click', function(e) {
2     container.css("display","block");
3     setTimeout(function(){
4        container.css("opacity","1");
5     },delay);
6  });

但是用setTimeout的方法有一个弊端,第5行的delay在不同的浏览器(甚至不同版本的相同浏览器)中需要设置不同的数值,经本人测试,chrome35和IE10下delay=0即可,Firefox30下delay>=14.

第三种解决方法是通过window.requestAnimationFram来实现,代码如下:

1 btn2.on('click', function(e) {
2       container.css("display","block");
3       requestanimationframe(function(){
4          container.css("opacity","1");
5       });
6    });

requestAnimationFram的作用是将opacity的操作推迟到下一个tick中处理,从而将display的操作分隔开,基本原理与setTimeout相同。

另外,关于display为何会破坏transition动画,目前本人仍未找到相关资料来证明其内部机制,我的个人理解是,display的操作会触发浏览器的reflow操作,而transition支持的效果只是触发浏览器的repaint操作,回到上面的demo,如果我们通过visibility属性来控制显示与隐藏,则不会破坏transition的效果。所以,可以暂时这么认为:reflow与repaint的混合会破坏transition的动画效果,至于更深层次的原因嘛,借我借我一双慧眼吧~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客慕白的成长之路

图标字体应用实践

使用的时候,通过background-position调整显示的位置,如下图所示:

1742
来自专栏前端人人

React第三方组件1(路由管理之Router的使用①简单使用)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2823
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

4192
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十七)一分钟轻松修改CheckBox、RadioButton、RatingBar、SeekBar样式

总结:通过一个简单的样式定义,即可完成对android原生控件样式的修改,省时省力省资源。赶紧试试吧!

1393
来自专栏上善若水

010HTML页面加载和解析流程详细介绍

2245
来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

1330
来自专栏小俊博客

通过JS显示网站运行时间

1544
来自专栏Youngxj

给网站添加好看的底部功能按钮

1695
来自专栏Android小菜鸡

自定义组件——TitleView

  TitleView是一个常用的顶部标题栏组件,操作简单,可以快速搭建,并实现统一管理标题栏的目的。   采用建造者模式,支持快速构建back按钮、标题名、...

903
来自专栏kevin-blog

ubuntu18.04安装搜狗输入法

然后去搜狗输入法官网:https://pinyin.sogou.com/linux/

3.6K2

扫码关注云+社区

领取腾讯云代金券