如何使用 JavaScript 暂停和恢复 CSS3 动画?
我试过谷歌搜索并从这个论坛中寻找解决我的问题的方法,但到目前为止还没有运气.我想通过单击图片来暂停我的 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.
我知道如何暂停幻灯片放映,我也能够恢复它一次,但是如果尝试暂停和恢复一次以上,它就会停止工作.这是我的代码的样子:
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
函数中的函数仍在运行,这就是 pause
和 resume
只工作一次的原因.
My guess is that my functions inside doStuff
function are still running and that's why pause
and resume
works only once.
有没有办法在我点击一次后清除这些功能?还是我试图以完全错误的方式做到这一点?帮助表示赞赏.:)
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. :)
这是一个使用 javascript 的解决方案:
Here is a solution using 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 解决方案(更短、更易读):
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');
});
.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">