61

私はグーグルでこのフォーラムから私の問題の解決策を探しようとしましたが、今のところ運がありません。写真をクリックして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はまだ実行されているので、1回だけ機能します。pauseresume

一度クリックした後にこれらの機能をクリアする方法はありますか？それとも私はこれを完全に間違った方法でやろうとしていますか？ヘルプをいただければ幸いです。:)

4

5 に答える 5

170

私はcssクラスでそれを行う方が簡単だと思います。これを使用すると、すべてのブラウザにプレフィックスを使用できます。

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

次に、このクラスをアニメーション要素に追加または削除するだけで、アニメーションを一時停止/再開できます。

于 2012-10-09T09:27:33.057 に答える
37

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">

于 2011-04-27T13:16:34.463 に答える
10

これはルイス・ヒジャールビアによって与えられた答えを拡張することです

.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値によって確実に上書きされます。

于 2014-07-17T05:41:45.580 に答える
1 
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;
  }
}
于 2015-07-20T08:20:03.213 に答える
-1

私はそれをテストしていませんが、おそらくこのようなものですか？

<!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>
于 2014-04-15T19:27:53.403 に答える