解决display无法使用transfrom过渡效果

如 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中被执行，这样便的到我们想要的过渡效果。
本文作者： Mrcxt
查看更多内容： 进入Mrcxt的wordpress博客