web-dev-qa-db-fra.com

Comment mettre en pause et reprendre l'animation CSS3 en utilisant JavaScript?

J'ai essayé de google et de chercher sur ce forum une solution à mon problème mais pas de chance jusqu'à présent. Je voudrais mettre en pause mon animation CSS3 (diaporama d'images) en cliquant sur une image et également reprendre la même animation en cliquant sur une image.

Je sais comment suspendre le diaporama et j'ai également pu le reprendre une fois, mais il cesse de fonctionner si j'essaie de faire une pause et de reprendre plus d'une fois. Voici à quoi ressemble mon code:

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

Je ne veux utiliser aucune bibliothèque JS (par exemple jQuery) ou toute autre solution externe.

Je suppose que mes fonctions à l'intérieur de la fonction doStuff fonctionnent toujours et c'est pourquoi pause et resume ne fonctionne qu'une seule fois.

Existe-t-il un moyen d'effacer ces fonctions après avoir cliqué dessus une fois? Ou est-ce que j'essaie de faire cela d'une manière totalement fausse? L'aide est appréciée. :)

javascriptanimationcss3resume
52
nqw1

Voici une solution utilisant 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">

solution jQuery (plus courte et plus lisible):

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">
33
Šime Vidas

Je trouve plus facile de le faire avec une classe css. Avec lui, vous pouvez utiliser des préfixes pour chaque navigateur.

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

Ensuite, il vous suffit d'ajouter ou de supprimer cette classe à votre élément animé pour mettre en pause/reprendre l'animation.

147
Luis Hijarrubia

Ceci est pour étendre la réponse donnée par 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;
}

Dans ma page, je déclenchais le changement de classe à partir de l'élément parent. Tout ce que je voulais faire, c'était faire pivoter l'image à l'intérieur. Mais il semble que parce que je n'utilisais pas le survol, l'ajout de la classe en pause n'a pas changé l'état de l'animation.

L'utilisation de! Important a permis de remplacer ces valeurs par les nouvelles valeurs CSS ajoutées.

8
tensai
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;
  }
}
1
T.Todua