Comment redémarrer les animations CSS3 avec Reflow ?

Redémarrer les animations CSS3

La relance des animations CSS3 lors de l'interaction de l'utilisateur est une tâche courante. Même si la suppression et la réinsertion de l’élément animé peuvent sembler efficaces, cela introduit une complexité inutile. Une solution plus raffinée émerge en tirant parti de la puissance de la redistribution pour réinitialiser de manière transparente l'animation.

La redistribution, un processus de reformatage et de repeinture de la structure du document, fournit un mécanisme pratique pour modifier les styles sans perturber la chronologie de l'animation. En définissant brièvement la propriété d'animation sur « aucun », puis en déclenchant une redistribution, le navigateur reçoit un signal pour ignorer toutes les animations en cours. Cela permet aux modifications de style ultérieures de prendre effet immédiatement, redémarrant efficacement l'animation.

Pour illustrer, considérons l'extrait JavaScript suivant :

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

Lorsqu'elle est déclenchée, cette fonction met l'animation en pause sur le ' animation', force une repeinture du navigateur, puis restaure la propriété d'animation à son état d'origine. En évitant les retards ou l'enchaînement des missions d'animation, cette approche simplifie le processus de réinitialisation de l'animation, garantissant une expérience visuelle fluide.

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!