前端 - CSS3 如何设计节点删除(对应标签也会删除)的动画?

Question

CSS3 的效果现在很多, 单纯的退出动画直接用类库可以做到: http://daneden.me/animate/
但这样有一个问题, 因为 CSS3 的动画都是需要元素一直存在的,
如果做应用遇到有删除, 为了好的体验加上动画, 那么删除的动画怎么做?
如果删除元素, 动画就没了; 如果延时删除元素, 动画变成异步去很麻烦了.
有没有好的方案来实现删除的动画?

Answer 1

用css3的keyframes试试

在100%的时候实应用隐藏的display:none;

Answer 2

可以监听animationend或者transitionend事件，动画或者渐变结束后让它消失。
这样不需要用动keyframes。

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

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