解决display无法使用transfrom过渡效果
来源:互联网 发布:开淘宝怎么上传宝贝 编辑:程序博客网 时间:2024/05/17 09:27
如 demo (如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐藏display:none;点击Reset按钮后,首先显示蓝色区域display:block,然后透明度逐渐恢复至1,代码如下:
本文作者:Mrcxt
查看更多内容:进入Mrcxt的wordpress博客
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中被执行,这样便的到我们想要的过渡效果。
本文作者:Mrcxt
查看更多内容:进入Mrcxt的wordpress博客
1 0
- 解决display无法使用transfrom过渡效果
- C++ transfrom的使用
- transfrom
- Transfrom
- 使用css3过渡属性实现翻牌效果
- 使用TransitionDrawable实现两张图片的过渡效果
- 【简报】使用3D过渡效果的图片幻灯:Adaptor
- 使用TransitionDrawable实现两张图片的过渡效果
- 使用pb制作图片之间的过渡效果
- 操作CSS3过渡使用jQuery创建一个拖放文本效果
- 使用 jquery.easing.js 增强动画过渡效果
- 使用 jquery.easing.js 增强动画过渡效果
- Transfrom在64bit服务下面无法运行
- 页面过渡效果
- 网页过渡效果
- ActionScript过渡效果
- 页面过渡效果
- CSS3的过渡效果
- Codeforces B. Escape
- android 音频编解码1
- 关于静态代码块,非静态代码块,构造函数的多态表现问题
- QT4中构建多线程的服务器
- 接手别人的代码,死的心有吗?
- 解决display无法使用transfrom过渡效果
- uml图六种箭头的含义
- Freeswitch事件名称
- 各种排序算法性能比较
- 我的 Android 之旅(十九)---数据存储--向SD卡中以实体类的方式存取数据
- C#调用C++ dll全解析, 基本数据
- oninput 事件与onchange
- Flask 配置文件config之from_object 篇
- 基础算法题(2) - 树和图