Comment redémarrer efficacement une animation CSS3 ?

Restauration efficace d'une animation CSS3

Redémarrer une animation CSS3 peut être une tâche difficile. Cette question examine une situation dans laquelle une barre est animée à l'aide de la transformation scaleY(0) pour représenter le temps restant, et il est nécessaire de réinitialiser l'animation à scaleY(1) avant de la reprendre à scaleY(0).

Alors que la tentative initiale de réinitialiser l'animation en définissant scaleY(1) s'est avérée inefficace, la question présente une solution intéressante consistant à supprimer et réinsérer un clone de l'élément animé pour redémarrer l'animation. Cependant, cette méthode n'est peut-être pas l'approche la plus efficace ou la plus simple.

Au lieu de compter sur le retrait et la réinsertion d'éléments, une solution plus pratique consiste à utiliser la technique de refusion. Cette technique consiste à supprimer temporairement le style d'animation, à déclencher une redistribution pour appliquer la modification, puis à réinitialiser le style d'animation. En incorporant la fonction JavaScript suivante dans le code :

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

puis en déclenchant cette fonction sur un événement (comme un clic sur un bouton), l'animation peut être efficacement réinitialisée. Cette approche fournit une méthode simple et efficace pour redémarrer les animations CSS3.

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!