1
votes

Essayer de mettre en pause une animation CSS en ajoutant une classe mise en pause

J'ai donc vu des gens recommander cette méthode comme la meilleure façon de mettre en pause une animation css. Simplement en ajoutant ou en supprimant une classe où l'état de lecture de l'animation est mis en pause vers ou depuis un élément. Voici mes tentatives:

<!DOCTYPE html>

<html lang='en'>

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='style.css'>
</head>

<body>
  <div id='animation' class='paused'></div>
</body>

</html>

@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

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

D'après ce que je comprends, l'animation devrait apparaître en pause dans le navigateur, mais à la place, elle est en cours d'exécution. J'ai essayé d'ajouter ! Important après la mise en pause et j'ai essayé de rendre la classe plus spécifique, c'est-à-dire # animation.paused . Qu'est-ce que je fais mal?

html css css-animations

0 commentaires

3 Réponses :

4
votes

C'est parce que #animation est un sélecteur d'identifiant et il est plus spécifique qu'un sélecteur de classe ( .paused ), donc ce dernier ne remplacera pas le premier.

Remplacez .paused par # animation.paused et cela fonctionnera.

<button onclick="toggleAnimationPlayState()">Toggle paused class</button>
<div id='animation' class="paused"></div>

@keyframes run {
 from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  position: absolute;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
}

#animation.paused {
  animation-play-state: paused;
}

function toggleAnimationPlayState() {
  document.querySelector('#animation').classList.toggle('paused')
}

6 commentaires

J'ai essayé cela, je l'ai écrit dans la question, n'a pas fonctionné :(

Pourriez-vous mettre à jour votre exemple reproductible minimal pour afficher réellement le problème?

C'est ça. Je ne peux pas le rendre plus minime que ça. C'est complet et vérifiable.

J'ai mis à jour mon exemple pour utiliser background-image . Faites-moi savoir si je peux être plus utile.

Dans le code initial que vous avez publié, il y avait un ; une ligne au-dessus du sélecteur, mais il a été supprimé par l'une des modifications. Vous pouvez toujours avoir ce point-virgule défectueux dans votre projet. Remarque ; # animation.paused n'est pas un sélecteur valide et ni ; .paused . Cependant, vous devez toujours que le sélecteur d'état en pause ait au moins la même spécificité que celui qui n'est pas en pause, sinon il ne s'appliquera pas.

Ouah merci! Je l'ai essayé aujourd'hui et cela fonctionne très bien. J'ai eu du mal à le faire fonctionner au début, alors j'ai fait des recherches sur la bascule et c'est la meilleure solution. Désolé de vous avoir donné la lèvre hier, idak comment ajouter un violon sur ce site pour le moment (vrai noob ici) et je bouche encore parfois: P Merci encore!

0
votes

Vous pouvez obtenir cet effet souhaité sans avoir besoin de JS. J'essaierais ce qui suit:

HTML

#animation {
   width: 256px;
   height: 256px;
   position: absolute;
   background-image: url('spritesheet.png');
   animation: run .5s steps(6) infinite;
};

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

@keyframes run {
   from {background-position: 0px;}
   to {background-position: -1536px;}
}

CSS

<div id="animation"></div>

0 commentaires

0
votes

Vous pouvez le faire via CSS avec quelque chose comme : hover ou avec un script. Ici, je démontre les deux.

<body>
  <div id='animation' class='paused'></div>
  <div class="container">
    <button id="animate" type="button">Do it</button>
  </div>
</body>

@keyframes run {
  from {
    background-position: 0px;
  }
  to {
    background-position: -1536px;
  }
}

#animation {
  width: 256px;
  height: 256px;
  background-image: url('https://i.stack.imgur.com/aH5zB.jpg');
  animation: run .5s steps(6) infinite;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

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

#animation.paused:hover,
#animation.running {
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
}

.container {
  margin-top: 1em;
}

function modifyclass() {
  if (document.getElementById("animation").classList.contains('running')) {
    document.getElementById("animation").classList.remove('running');
  } else {
    document.getElementById("animation").classList.add('running');
  }
  //  document.getElementById("animation").classList.toggle('running');
}
var el = document.getElementById("animate");
el.addEventListener("click", modifyclass, false);

0 commentaires