我无法为我的 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 做到这一点?
最佳答案
我找到了解决方案。我创建了什么:
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 与以前的动画一起使用,然后开始新的完成。
关于jquery - 如何用css3动画添加类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19094274/