如何使用JavaScript暂停和恢复CSS3动画？
如何使用JavaScript暂停和恢复CSS3动画？
提问于 2011-04-27 20:54:38
我试着在谷歌上搜索，并在这个论坛上寻找我的问题的解决方案，但到目前为止还没有成功。我想通过单击图片暂停我的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只工作一次的原因。
有没有办法在我单击这些函数一次后将其清除？或者我试图以一种完全错误的方式来做这件事？感谢您的帮助。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5804444
复制相关文章
相似问题
腾讯云开发者
