如何使用JavaScript暂停和恢复CSS3动画?
|
我已经尝试通过Google搜索该论坛,并找到了解决我问题的方法,但到目前为止还没有运气。我想通过单击图片来暂停CSS3动画(图像幻灯片放映),并通过单击图片来恢复到相同的动画。
我知道如何暂停幻灯片放映,我也能够将其恢复一次,但是如果尝试暂停并恢复多次以上,它将停止工作。这是我的代码的样子:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type=\"text/css\">
.pic {
position: absolute;
opacity: 0;
}
#pic1 {
-webkit-animation: pic1 4s infinite linear;
}
#pic2 {
-webkit-animation: pic2 4s infinite linear;
}
@-webkit-keyframes pic1 {
0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes pic2 {
0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
</style>
<script type=\"text/javascript\">
function doStuff(){
var pic1 = document.getElementById(\"pic1\");
var pic2 = document.getElementById(\"pic2\");
pic1.style.webkitAnimationPlayState=\"paused\";
pic2.style.webkitAnimationPlayState=\"paused\";
pic1.onclick = function(){
pic1.style.webkitAnimationPlayState=\"running\";
pic2.style.webkitAnimationPlayState=\"running\";
}
pic2.onclick = function(){
pic1.style.webkitAnimationPlayState=\"running\";
pic2.style.webkitAnimationPlayState=\"running\";
}
}
</script>
</head>
<body>
<img id=\"pic1\" class=\"pic\" src=\"photo1.jpg\" />
<img id=\"pic2\" class=\"pic\" src=\"photo2.jpg\" onclick=\"doStuff()\" />
</body>
</html>
我不想使用任何JS库(例如jQuery)或任何其他外部解决方案。
我的猜测是我在doStuff
函数中的函数仍在运行,这就是为什么pause
和resume
只工作一次的原因。
单击一次后是否可以清除这些功能?还是我试图以完全错误的方式做到这一点?感谢帮助。 :)
没有找到相关结果
已邀请:
5 个回复
枫湃揩乾纲
篮肥炼皖
然后,您只需要在动画元素中添加或删除此类即可暂停/恢复动画。
抵舵
在我的页面中,我触发了父元素的类更改。我只想旋转内部的图像。但是似乎因为我没有使用悬停,所以添加了暂停的类对动画状态没有影响。 !important的使用可确保这些值被新添加的CSS值覆盖。
皇小福另届
栖很钾是狠