如何暂停，并使用JavaScript恢复CSS3动画？ [英] How to pause and resume CSS3 animation using JavaScript?
问题描述
我试图谷歌，并从这个论坛找我的问题的解决方案，但至今没有运气。我想通过点击图片以暂停我的CSS3动画（幻灯片播放），并恢复到相同的动画通过点击图片。
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.
我知道如何暂停幻灯片播放，我还能够一次恢复它，但它停止工作，如果试图暂停和恢复超过一次。这里是我的code的样子：
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>
我不想使用任何JS库（例如jQuery的）或任何其他的外部溶液。
I don't want to use any JS libraries (e.g. jQuery) or any other external solution.
我的猜测是，我在 doStuff功能功能仍在运行，这就是为什么暂停和恢复仅一次。
My guess is that my functions inside doStuff function are still running and that's why pause and resume works only once.
有没有办法来清除这些功能我已经点击过一次之后？还是我想这样做在一个完全错误的方式？帮助是AP preciated。 ：）
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. :)
推荐答案
在这里你去：
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 = '';
}
}
}
现场演示： http://jsfiddle.net/simevidas/TnGhH/2/
jQuery的解决方案（=短更易读）：
jQuery solution (= shorter and more readable):
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');
});
现场演示： http://jsfiddle.net/simevidas/TnGhH/3/
这篇关于如何暂停，并使用JavaScript恢复CSS3动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
