0

我无法为我的 css3 动画创建漂亮的完成。就像 go box-shadow 到 opacity 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 做到这一点？

4

1 回答 1

0

我找到了解决方案。我创造了什么：

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 与以前的动画一起使用并开始新的完成。

于 2013-09-30T13:04:52.977 回答