Pourquoi les transitions CSS ne fonctionnent-elles pas avec les curseurs d'image réactifs ?

Forcer la redistribution du navigateur lors des modifications CSS

Lors de la création d'un curseur d'image réactif non jQuery reposant sur des transitions CSS3, vous pouvez rencontrer un problème où les modifications apportées aux propriétés CSS ne déclenchent aucune animation. Cela est dû à l'optimisation du navigateur, qui simplifie les changements de propriétés et ignore les animations.

Pour résoudre ce problème, il est nécessaire de forcer une redistribution du navigateur. La redistribution est le processus par lequel le navigateur recalcule la disposition d'un élément et le repositionne en réponse aux changements de style.

Dans votre extrait de code, vous définissez la propriété de transition sur « aucun 0s linéaire » avant de créer le CSS initial. change, puis remettez-le sur « toutes les 0,2 secondes de réduction ». Cependant, cette approche ne déclenche pas de redistribution et donc aucune animation ne se produit.

La solution réside dans la demande explicite de la valeur offsetHeight de l'élément après avoir apporté des modifications CSS. Cette action lance une redistribution et force le navigateur à reconnaître et appliquer les styles modifiés.

Le code pour y parvenir est :

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

Où 'elt' est l'élément que vous avez créé le style change. Appeler 'reflow(elt)' après avoir effectué les modifications CSS déclenchera l'animation souhaitée.

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!