問(wèn)題描述

CSS3 的效果現(xiàn)在很多, 單純的退出動(dòng)畫(huà)直接用類庫(kù)可以做到: http://daneden.me/animate/但這樣有一個(gè)問(wèn)題, 因?yàn)?CSS3 的動(dòng)畫(huà)都是需要元素一直存在的,如果做應(yīng)用遇到有刪除, 為了好的體驗(yàn)加上動(dòng)畫(huà), 那么刪除的動(dòng)畫(huà)怎么做?如果刪除元素, 動(dòng)畫(huà)就沒(méi)了; 如果延時(shí)刪除元素, 動(dòng)畫(huà)變成異步去很麻煩了.有沒(méi)有好的方案來(lái)實(shí)現(xiàn)刪除的動(dòng)畫(huà)?

問(wèn)題解答

用css3的keyframes試試

在100%的時(shí)候?qū)崙?yīng)用隱藏的display:none;

可以監(jiān)聽(tīng)animationend或者transitionend事件，動(dòng)畫(huà)或者漸變結(jié)束后讓它消失。這樣不需要用動(dòng)keyframes。

$('.yourClass').addClass('animationClass').on(’transitionend webkitTransitionEnd oTransitionEnd otransitionend animationend webkitAnimationEnd’, function(){$('.yourClass').hide();});

不需要消失的時(shí)候unbind事件即可