小编典典

如何使用JavaScript暂停和恢复CSS3动画?

javascript

我试图谷歌,并从这个论坛上寻找我的问题的解决方案,但到目前为止没有运气。我想通过单击图片来暂停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只能运行一次。

单击一次后是否可以清除这些功能?还是我试图以一种完全错误的方式做到这一点?感谢帮助。:)


阅读 346

收藏
2020-05-01

共1个答案

小编典典

这是使用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">
2020-05-01