問題描述

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

問題解答

用css3的keyframes試試

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

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

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

不需要消失的時候unbind事件即可