前端當transition遇上display
相信大家在試用css3動畫時候一定用過transition屬性，相對于js動畫來說用起來更快速簡單。
代碼如下：
HTML結構：
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差不多，通過遞歸調用同一方法來不斷更新畫面以達到動起來的效果，但它優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API，在運行時瀏覽器會自動優(yōu)化方法的調用，并且如果頁面不是激活狀態(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時碰到的坑。
本文地址：http://likemindfilms.com/tutorial/wd3158.html
