前端當(dāng)transition遇上display

相信大家在試用css3動(dòng)畫時(shí)候一定用過(guò)transition屬性，相對(duì)于js動(dòng)畫來(lái)說(shuō)用起來(lái)更快速簡(jiǎn)單。

代碼如下：

HTML結(jié)構(gòu)：

動(dòng)畫按鈕

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');

}

});

在點(diǎn)擊按鈕后可以看到淡入淡出的動(dòng)畫效果，但是在css代碼中解除對(duì)于display屬性的兩段注釋以后，再打開瀏覽器一看，淡入淡出的效果全沒了。

這簡(jiǎn)直是破壞性的作用，然后我度娘了一下總結(jié)了幾個(gè)方法。

第一種方法：將display用visibility來(lái)替代，大家都知道visibility的效果其實(shí)跟display在一定程度上相似，那為什么說(shuō)只是一定程度上相似呢，因?yàn)樗匀皇钦伎臻g的，那你一定會(huì)說(shuō)，這么用跟opacity沒啥區(qū)別呀。但卻可以避免遮擋下面的層比如按鈕的點(diǎn)擊事件。

第二種方法是相對(duì)于第一種方法的進(jìn)階，利用了js的setTimout和transitionend事件

css代碼 將class hidden類中的opacity分離出來(lái)

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來(lái)取代setTimeout，相應(yīng)的修改了if條件里的js。

requestAnimationFrame其實(shí)也就跟setTimeout/setInterval差不多，通過(guò)遞歸調(diào)用同一方法來(lái)不斷更新畫面以達(dá)到動(dòng)起來(lái)的效果，但它優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動(dòng)畫提供的API，在運(yùn)行時(shí)瀏覽器會(huì)自動(dòng)優(yōu)化方法的調(diào)用，并且如果頁(yè)面不是激活狀態(tài)下的話，動(dòng)畫會(huì)自動(dòng)暫停，有效節(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');

});

}

});

以上就是當(dāng)transition遇上display時(shí)碰到的坑。