如何使用 JavaScript 暂停和恢复 CSS3 动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5804444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pause and resume CSS3 animation using JavaScript?
提问by nqw1
I've tried to google and look from this forum a solution for my problem but no luck so far. I would like to pause my CSS3 animation (image slide show) by clicking a picture and also resume to the same animation by clicking a picture.
我试图用谷歌搜索并从这个论坛中寻找我的问题的解决方案，但到目前为止还没有运气。我想通过单击图片来暂停我的 CSS3 动画（图像幻灯片），并通过单击图片恢复到相同的动画。
I know how to pause the slide show and I was also able to resume it once, but then it stops working if try to pause and resume more than one time. Here is how my code looks like:
我知道如何暂停幻灯片放映，我也可以恢复一次，但是如果尝试暂停和恢复一次以上，它就会停止工作。这是我的代码的样子：
<!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>
I don't want to use any JS libraries (e.g. jQuery) or any other external solution.
我不想使用任何 JS 库（例如 jQuery）或任何其他外部解决方案。
My guess is that my functions inside doStufffunction are still running and that's why pauseand resumeworks only once.
我的猜测是我的函数内部doStuff函数仍在运行，这就是为什么pause并且resume只工作一次。
Is there a way to clear these functions after I have clicked them once? Or am I trying to do this in a totally wrong way? Help is appreciated. :)
单击一次后，有没有办法清除这些功能？还是我试图以完全错误的方式做到这一点？帮助表示赞赏。:)
采纳答案by ?ime Vidas
Here is a solution using javascript:
这是使用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 solution (shorter and more readable):
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">回答by Luis Hijarrubia
I find it easier to do it with a css class. With it, you can use prefixes for every browser.
我发现使用 css 类更容易做到这一点。有了它，您可以为每个浏览器使用前缀。
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Then you only have to add or remove this class to your animated element yo pause / resume the animation.
然后你只需要在你的动画元素中添加或删除这个类，你就可以暂停/恢复动画。
回答by tensai
This is to extend the answer given by Luis Hijarrubia
这是扩展 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;
}
In my page I was triggering the change of class from the parent element. All I wanted to do was rotate the image inside. But it seems that because I was not using the hover, the adding of the paused class made no difference to the animation state.
在我的页面中，我正在从父元素触发类的更改。我想要做的就是旋转里面的图像。但似乎因为我没有使用悬停，所以暂停类的添加对动画状态没有影响。
The use of !important ensured that these values were overwritten by the new added CSS values.
!important 的使用确保这些值被新添加的 CSS 值覆盖。
回答by T.Todua
var e = document.getElementsById("Your_Id");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
function listener(e) { alert("Your POSITION parameter:" + .target.style.position);
switch(e.type) {
case "animationstart":
d = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
d = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
d= "New loop started at time " + e.elapsedTime; alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused"; window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000);
break;
}
}
回答by user40521
I havent tested it but perhaps something like this?
我还没有测试过，但也许是这样的？
<!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.className="pic paused";
pic2.className="pic paused";
pic1.onclick = function(){
pic1.className="pic pic1";
pic2.className="pic pic2";
}
pic2.onclick = function(){
pic1.className="pic pic1";
pic2.className="pic pic2";
}
}
</script>
</head>
<body>
<img id="pic1" class="pic pic1" src="photo1.jpg" />
<img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" />
</body>
</html>
