jquery - 如何用css3动画添加类？

Question

我无法为我的 css3 动画创建漂亮的完成。就像将 box-shadow 设置为不透明度 0。如果我只是添加带有暂停动画的类，它会不太好，比如 blik stop。

Javascript

$(this).addClass('paused').delay(200).addClass('a-finish');

CSS

.paused {        
    -webkit-animation-play-state:paused;        
    -moz-animation-play-state:paused;        
    animation-play-state:paused;        
}

.a-finish { 
    -webkit-animation: 5s linear 0s normal none 1 wrap-done;            
}

@-webkit-keyframes wrap-done {         
    0% { box-shadow: 0 9px 4px rgba(255, 255, 255, 1) inset;}
    100% { box-shadow: 0 9px 4px rgba(255, 255, 255, 0) inset;}        
}

所以我只需要通过另一个 css3 动画制作一些简单的淡出动画。

我如何使用 css3 和 JQ 做到这一点？

Answer 1

我找到了解决方案。我创建了什么:

Javascript

$('.class').addClass('blink');                       <-Start some animation.
$('.class').on('webkitTransitionEnd', function() {   <-When animation end.
    $(.class).addClass('paused');                    <-Stop animation.
    $(.class).addClass('a-finish');                  <-Start finish animation.
}

CSS

.blink {
    ...some blik animation
}

.paused {        
-webkit-animation-play-state:paused;        
-moz-animation-play-state:paused;        
animation-play-state:paused;        
}

.a-finish { 
    -webkit-animation: 5s linear 0s normal none 1 wrap-done;            
}

@-webkit-keyframes wrap-done {         
    0% { box-shadow: 0 9px 4px rgba(255, 255, 255, 1) inset;}
    100% { box-shadow: 0 9px 4px rgba(255, 255, 255, 0) inset;}        
}

这是行不通的!!

因此，如果动画被 animation-play-state:paused; 暂停，我们将无法添加新的。所以我只是将 removeClass 与以前的动画一起使用，然后开始新的完成。