Pourquoi mes transitions CSS attribuées par JavaScript ne fonctionnent-elles pas ?

Les transitions CSS attribuées par JavaScript ne fonctionnent pas

Lors de l'application de transitions CSS3 à un diaporama via JavaScript, vous pouvez rencontrer un problème déroutant où le paramètre spécifié les transitions ne fonctionnent pas malgré l'application des styles corrects. Cet écart se produit car les transitions CSS se déclenchent uniquement lorsque la propriété spécifiée change de valeur, et non lorsque la transition est initialement définie.

Pour résoudre ce problème, assurez-vous que les trois conditions suivantes sont remplies :

1. Définition explicite de la propriété : L'élément affecté doit avoir la propriété explicitement déclarée dans son style initial.
2. Définition de la transition : L'élément doit avoir la transition souhaitée définie, tel que "transition : opacité 2s ;".
3. Changement de valeur de propriété : Après avoir défini la transition, définissez la nouvelle valeur de propriété, déclenchant l'animation.

Dans votre exemple, les transitions ne fonctionnaient pas car le changement de valeur de propriété (paramètre « opacité : 1 ») s'est produit avant que le navigateur ait eu la possibilité de traiter la transition affectée dynamiquement. Pour résoudre ce problème, introduisez un délai avant d'attribuer la classe "target-fadein" :

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

Vous pouvez également inclure directement la classe "target-fadein-begin" dans votre code HTML, ce qui lui permet d'être analysé au chargement. et prêt pour la transition.

N'oubliez pas que l'affectation JavaScript de la transition elle-même ne lance pas l'animation ; c'est le changement de valeur de la propriété qui déclenche l'effet de transition.

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!