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

问题描述

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

问题解答

用css3的keyframes试试

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

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

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

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