Pourquoi mes transitions CSS ne parviennent-elles parfois pas à s'animer ?

Comprendre les problèmes de redistribution CSS dans les transitions du navigateur

Lors de la création d'un curseur d'image réactif à l'aide de transitions CSS3, un défi courant se pose lorsque l'on tente de déclencher une animation lorsque les propriétés CSS sont modifiées. Malgré l'initialisation de la propriété de transition, les navigateurs peuvent ignorer les modifications et ne pas exécuter l'animation souhaitée.

Solution : forcer la redistribution pour déclencher l'animation

La solution à ce problème réside dans forcer une redistribution du navigateur, qui recalcule la mise en page et le rendu de la page. Ceci peut être réalisé en accédant à la propriété offsetHeight d'un élément. La fonction JavaScript suivante accomplit cela :

function reflow(elt) {
  console.log(elt.offsetHeight);
}

Implémentation :

Pour implémenter la solution, appelez la fonction reflow() après avoir modifié les propriétés CSS qui déclenchent l'animation . Par exemple :

ul.style.transition = 'none 0s linear';
ul.style.left = '-600px';
ul.style.transition = 'all 0.2s ease-out';
reflow(ul); // Forces a reflow
ul.style.left = '0px';

Remarque :

Une optimisation récente implique le remplacement de console.log(elt.offsetHeight) par void(elt.offsetHeight), comme optimiseur est moins susceptible d'ignorer cette déclaration comme un effet secondaire potentiel.

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!