Comment redémarrer les animations CSS3 sans supprimer d'éléments ?

Redémarrage des animations CSS3 : une meilleure approche que la suppression d'éléments

Lorsque vous travaillez avec des animations CSS3, la nécessité de redémarrer une animation lors de l'interaction de l'utilisateur peut surgir. Un scénario courant est une barre de progression qui affiche le temps restant et nécessite une réinitialisation une fois l'opération terminée. Bien que la suppression et la réinsertion de l'élément animé puissent redémarrer l'animation, cela implique une manipulation inutile du DOM.

Méthode alternative utilisant Reflow

Une approche plus efficace consiste à déclencher un navigateur redistribuer pour appliquer les modifications d’animation. Ceci peut être réalisé avec la fonction JavaScript suivante :

function reset_animation() {
  var el = document.getElementById('animated');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null;
}

Dans cet exemple, nous sélectionnons l'élément animé (#animated) et définissons temporairement son animation sur aucune. Cela met l'animation en pause sans réinitialiser sa progression. Ensuite, nous utilisons offsetHeight pour forcer une redistribution, ce qui garantit que tous les styles CSS sont appliqués. Enfin, nous redéfinissons la propriété d'animation à sa valeur d'origine, déclenchant le redémarrage de l'animation à partir de son état initial.

Exemple d'implémentation

Dans l'extrait HTML et CSS suivant , nous avons une barre de progression qui rebondit sur l'écran :

<div>

#animated {
  position: absolute;
  top: 70px;
  width: 50px; height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}
@keyframes bounce {
  0% { left: 0; }
  50% { left: calc( 100% - 50px ); }
  100% { left: 0; }
}

Cliquer sur le bouton "Réinitialiser" appelle le fonction reset_animation(), redémarrant l'animation sans délai notable ni surcharge de manipulation DOM.

Conclusion

L'utilisation de la redistribution du navigateur pour appliquer les modifications de l'animation offre une solution plus efficace et plus élégante. pour redémarrer les animations CSS3. Il élimine le besoin de supprimer et de réinsérer des éléments, ce qui se traduit par une expérience utilisateur plus fluide et plus performante.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!