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

Redémarrer les animations CSS3 : une technique plus efficace

Lorsque l'on travaille avec des animations CSS3, il devient souvent nécessaire de redémarrer l'animation après un événement, comme un clic. Cependant, définir directement l'échelle de l'élément affecté ou d'autres propriétés peut s'avérer problématique, entraînant des retards ou un enchaînement compliqué des affectations.

Astuce de suppression d'élément

Une méthode non conventionnelle proposée est pour supprimer l'élément animé du document et réinsérer une version clonée. Bien qu'il redémarre efficacement l'animation, il introduit une complexité inutile et des problèmes de performances potentiels.

Reflow à la rescousse

Une solution plus élégante et plus efficace consiste à déclencher une refusion . La redistribution est un processus par lequel le navigateur recalcule la disposition des éléments en réponse à une modification du DOM ou du CSS. En exploitant ce comportement, nous pouvons effectivement réinitialiser l'animation sans supprimer l'élément.

Le code JavaScript suivant illustre cette approche :

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

La propriété offsetHeight est utilisée pour déclencher la redistribution, obligeant le navigateur à recalculer la mise en page et à réappliquer les paramètres d'animation. Cela redémarre efficacement l'animation immédiatement sans aucun retard ni chaînage fastidieux.

Cette technique est applicable à une large gamme d'animations CSS3 et peut être facilement intégrée dans n'importe quelle application ou framework Web. Il fournit un moyen simple mais efficace de redémarrer des animations sans introduire d'effets secondaires indésirables.

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!