61 votes

nqw1 avatar

Comment mettre en pause et reprendre une animation CSS3 à l'aide de JavaScript ?

Demandé el 27 de Avril, 2011
Quand la question a-t-elle été
18091 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

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

Je sais comment mettre le diaporama en pause et j'ai également pu le reprendre une fois, mais il cesse de fonctionner si on essaie de le mettre en pause et de le 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 pas utiliser de bibliothèques JS (par exemple jQuery) ou toute autre solution externe.

Je pense que mes fonctions dans doStuff sont toujours en cours et c'est pourquoi pause y resume ne fonctionne qu'une seule fois.

Existe-t-il un moyen d'effacer ces fonctions après les avoir cliquées une fois ? Ou bien est-ce que j'essaie de le faire d'une manière totalement erronée ? Toute aide est la bienvenue :)

Demandé el 27 de Avril, 2011 par nqw1

Réponses

Trop de publicités?

164voto

Luis Hijarrubia avatar
Luis Hijarrubia Points 611

Je trouve plus facile de le faire avec une classe css. Avec elle, 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;
}

Il vous suffit ensuite d'ajouter ou de supprimer cette classe à votre élément animé pour mettre en pause ou reprendre l'animation.

Répondu el 9 de Octobre, 2012 par Luis Hijarrubia (611 Points )

6 votes

Avatar de Josh Crowder

C'est une meilleure solution et devrait être la réponse acceptée, beaucoup plus propre.

Commenté el 31 de Mai, 2013 par Josh Crowder

0 votes

Avatar de nqw1

Merci pour cette réponse Luis Hijarrubia mais je cherchais un moyen de le faire avec JS. Cela pourrait être mieux pour d'autres cas mais pas pour le mien.

Commenté el 19 de Novembre, 2014 par nqw1

0 votes

Avatar de Matt

@nq1 CSS est la manière correcte de le faire. Utilisez JavaScript pour ajouter la classe. Cette réponse est également compatible avec tous les navigateurs, contrairement à la réponse acceptée.

Commenté el 27 de Juin, 2015 par Matt
Afficher 4 autres commentaires

36voto

Šime Vidas avatar
Šime Vidas Points 59994

Voici une solution utilisant le 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">
Répondu el 27 de Avril, 2011 par Šime Vidas (59994 Points )

0 votes

Avatar de kabrice

Est-il possible de détecter le temps restant lors d'une pause ? Thx

Commenté el 12 de Octobre, 2018 par kabrice

9voto

tensai avatar
tensai Points 30

Il s'agit de prolonger 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 était de faire pivoter l'image à l'intérieur. Mais il semble que, comme je n'utilisais pas le survol, l'ajout de la classe en pause ne faisait aucune différence dans l'état de l'animation.

L'utilisation de !important a permis de faire en sorte que ces valeurs soient écrasées par les nouvelles valeurs CSS ajoutées.

Répondu el 17 de Juillet, 2014 par tensai (30 Points )

2 votes

Avatar de xec

Pour clarifier, cela est dû à la spécificité des css. Un script qui ajoute la propriété directement à l'élément (comme la réponse de Sime) n'aurait pas ce problème car les styles "en ligne" remplacent les règles des feuilles de style par défaut. developer.mozilla.org/fr/US/docs/Web/CSS/Spécificité

Commenté el 26 de Novembre, 2015 par xec

0 votes

Avatar de T J

Il s'agit d'un problème spécifique causé par votre HTML et votre CSS. Au mieux, il s'agit d'un commentaire, qui ne répond pas à la question posée.

Commenté el 18 de Janvier, 2016 par T J

0 votes

Avatar de Regular Joe

Je suis venu ici pour poster cette réponse si elle n'a pas été postée. Dans mon cas, j'avais besoin de mettre en pause plusieurs animations simultanées et j'ai trouvé que cette méthode était la plus simple. Elle vous permet également d'ajouter des effets tels que .pause:hover si cela répond à un besoin.

Commenté el 24 de Octobre, 2017 par Regular Joe

1voto

snm-yah avatar
snm-yah Points 2067 
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;
  }
}
Répondu el 20 de Juillet, 2015 par snm-yah (2067 Points )

-1voto

user40521 avatar
user40521 Points 21

Je ne l'ai pas testé mais peut-être quelque chose comme ça ?

<!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>
Répondu el 15 de Avril, 2014 par user40521 (21 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X