相信大家在试用css3动画时候一定用过transition属性，相对于js动画来说用起来更快速简单。 代码如下： HTML结构：
XHTML 1 2 <div id = "box" > </div> <button> 动画按钮 </button>CSS代码：
CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 .box { background : goldenrod ; width : 300px ; height : 300px ; margin : 30px auto ; transition : all .4s linear ; /*display: block;*/ } .hidden { /*display: none;*/ opacity : 0 ; }JS代码
JavaScript 1 2 3 4 5 6 7 8 var box = $ ( '#box' ) ; $ ( 'button' ) . on ( 'click' , function ( ) { if ( box . hasClass ( 'hidden' ) ) { box . removeClass ( 'hidden' ) ; } else { box . addClass ( 'hidden' ) ; } } ) ;在点击按钮后可以看到淡入淡出的动画效果，但是在css代码中解除对于display属性的两段注释以后，再打开浏览器一看，淡入淡出的效果全没了。这简直是破坏性的作用，然后我度娘了一下总结了几个方法。
第一种方法：将display用visibility来替代，大家都知道visibility的效果其实跟display在一定程度上相似，那为什么说只是一定程度上相似呢，因为它仍然是占空间的，那你一定会说，这么用跟opacity没啥区别呀。但却可以避免遮挡下面的层比如按钮的点击事件。
第二种方法是相对于第一种方法的进阶，利用了js的setTimout和transitionend事件css代码 将class hidden类中的opacity分离出来
CSS代码：
CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .box { background : goldenrod ; width : 300px ; height : 300px ; margin : 30px auto ; transition : all .4s linear ; visibility : visible ; } .hidden { display : none ; } .visuallyhidden { opacity : 0 ; }js代码
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var box = $ ( '#box' ) ; $ ( 'button' ) . on ( 'click' , function ( ) { if ( box . hasClass ( 'hidden' ) ) { box . removeClass ( 'hidden' ) ; setTimeout ( function ( ) { box . removeClass ( 'visuallyhidden' ) ; } , 20 ) ; } else { box . addClass ( 'visuallyhidden' ) ; box . one ( 'transitionend' , function ( e ) { box . addClass ( 'hidden' ) ; } ) ; } } ) ;第三种方法与第二种方法类似，用requestAnimationFrame来取代setTimeout，相应的修改了if条件里的js。requestAnimationFrame其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。
js代码如下
JavaScript 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var box = $ ( '#box' ) ; $ ( 'button' ) . on ( 'click' , function ( ) { if ( box . hasClass ( 'hidden' ) ) { box . removeClass ( 'hidden' ) ; requestAnimationFrame ( function ( ) { box . removeClass ( 'visuallyhidden' ) ; } ) ; } else { box . addClass ( 'visuallyhidden' ) ; box . one ( 'transitionend' , function ( e ) { box . addClass ( 'hidden' ) ; } ) ; } } ) ;以上就是当transition遇上display时碰到的坑。
原文出处： 携程设计委员会
