Comment forcer la redistribution du navigateur pour les transitions CSS : un guide pour des animations efficaces

Problème de redistribution du navigateur dans la transition CSS

Lors de la transition d'éléments DOM à l'aide de CSS3, il est souvent nécessaire de forcer une redistribution du navigateur pour déclencher des animations. Dans les cas où la modification successive de plusieurs propriétés CSS entraîne un comportement inattendu, le navigateur peut optimiser les modifications, entraînant l'absence d'animations.

Pour résoudre ce problème, il est essentiel de comprendre le concept de redistribution. Une redistribution se produit lorsque le navigateur recalcule la disposition d'une partie de l'arborescence du document, ce qui est déclenché par des modifications de la taille ou de la position des éléments au niveau du bloc.

Une technique pour forcer la redistribution consiste à accéder à la propriété offsetHeight de un élément après avoir modifié ses styles. Cela peut être accompli grâce à la fonction suivante :

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

En appelant cette fonction après la mise à jour du CSS de l'élément, une redistribution peut être déclenchée, permettant à la transition de prendre effet. Voici un exemple modifié du code de la question qui utilise cette technique :

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

Une autre option consiste à utiliser l'opérateur void(), qui empêche l'optimiseur d'ignorer l'accès à la propriété :

void(elt.offsetHeight);

Cette technique est efficace car void est un opérateur unaire qui évalue l'expression puis rejette son résultat, garantissant que tous les effets secondaires de l'accès à la propriété sont exécutés.

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!