Redémarrage des animations CSS3 : la redistribution est-elle la meilleure alternative à la suppression d'éléments ?

Redémarrage des animations CSS3 : alternative améliorée à la suppression d'éléments

Dans le but de redémarrer une animation CSS3, une technique intrigante souvent utilisée consiste à supprimer le élément animé du document et réinsertion de son clone. Bien qu'efficace, cette approche offre une opportunité d'optimisation.

Une méthode préférable pour réaliser le redémarrage de l'animation, comme suggéré par un expert anonyme, consiste à déclencher une refusion. Cela peut être accompli simplement en accédant à la hauteur du HTMLElement, comme démontré ci-dessous :

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

Dans cet exemple, l'animation est initialement définie sur « aucun », déclenchant la réinitialisation. Par la suite, une redistribution est initiée en accédant à offsetHeight de l'élément, qui calcule et met en cache la taille de l'élément, appliquant ainsi la réinitialisation de l'animation. Enfin, la valeur « nulle » attribuée au style d'animation lui permet d'être rejoué.

Cette approche basée sur la redistribution est à la fois concise et efficace, surpassant la méthode précédente par sa simplicité et son efficacité.

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!