如何使用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只工作一次的原因。
有没有办法在我单击这些函数一次后将其清除？或者我试图以一种完全错误的方式来做这件事？感谢您的帮助。:)
回答 5
Stack Overflow用户
回答已采纳
发布于 2011-04-27 21:16:34
这是一个使用javascript的解决方案：
var imgs = document.querySelectorAll('.pic');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = toggleAnimation;
imgs[i].style.webkitAnimationPlayState = 'running';
}
function toggleAnimation() {
var style;
for (var i = 0; i < imgs.length; i++) {
style = imgs[i].style;
if (style.webkitAnimationPlayState === 'running') {
style.webkitAnimationPlayState = 'paused';
document.body.className = 'paused';
} else {
style.webkitAnimationPlayState = 'running';
document.body.className = '';
}
}
}.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;
}
}
.paused {
background-color: #ddd;
}<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">
jQuery解决方案(更短、更具可读性)：
var imgs = $('.pic'),
playState = '-webkit-animation-play-state';
imgs.click(function() {
imgs.css(playState, function(i, v) {
return v === 'paused' ? 'running' : 'paused';
});
$('body').toggleClass('paused', $(this).css(playState) === 'paused');
});.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;
}
}
.paused {
background-color: #ddd;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">
Stack Overflow用户
发布于 2012-10-09 17:27:33
我发现使用css类更容易做到这一点。有了它，你可以为每个浏览器使用前缀。
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}然后，您只需在动画元素中添加或删除此类，即可暂停/恢复动画。
Stack Overflow用户
发布于 2014-07-17 13:41:46
这是Luis Hijarrubia.给出的答案的推广
.pause {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}在我的页面中，我从父元素触发了类的更改。我想做的就是旋转里面的图像。但似乎因为我没有使用悬停，所以添加暂停的类对动画状态没有任何影响。
使用!important可确保这些值被新添加的CSS值覆盖。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5804444
复制相关文章
相似问题