相信大家在試用css3動畫時候一定用過transition屬性耗帕，相對于js動畫來說用起來更快速簡單邻辉。
代碼如下：
HTML結構：
<div id="box" class="box"></div>
<button>動畫按鈕</button>
CSS代碼：
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all .4s linear;
/*display: block;*/
}
.hidden {
/*display: none;*/
opacity: 0;
}
JS代碼
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沒啥區(qū)別呀。但卻可以避免遮擋下面的層比如按鈕的點擊事件倦春。
第二種方法是相對于第一種方法的進階户敬，利用了js的setTimout和transitionend事件
css代碼 將class hidden類中的opacity分離出來
CSS代碼：
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all .4s linear;
visibility: visible;
}
.hidden {
display: none;
}
.visuallyhidden {
opacity: 0;
}
js代碼
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差不多，通過遞歸調(diào)用同一方法來不斷更新畫面以達到動起來的效果呢堰，但它優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API抄瑟，在運行時瀏覽器會自動優(yōu)化方法的調(diào)用，并且如果頁面不是激活狀態(tài)下的話枉疼，動畫會自動暫停皮假，有效節(jié)省了CPU開銷。
js代碼如下
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時碰到的坑往衷。
