Pourquoi mes transitions CSS ne fonctionnent-elles pas lorsqu'elles sont appliquées via JavaScript ?

Les transitions CSS ne sont pas appliquées lorsqu'elles sont attribuées via JavaScript

Malgré l'application des transitions CSS3 avec JavaScript, elles ne fonctionnent pas comme prévu. Ce problème survient lors de l'attribution dynamique de classes CSS contenant des propriétés de transition.

Pour déclencher des transitions efficacement, les prérequis sont :

• Définition explicite de la propriété (par exemple, opacité : 0 ;)
• Transition définie (par exemple, transition : opacité 2s ;)
• Définition de la nouvelle propriété (par exemple, opacité : 1 ;)

En JavaScript, le problème vient de le temps de traitement du navigateur. Les styles corrects doivent être appliqués en premier, suivis d'un léger délai avant de définir la classe CSS responsable de la transition. Ce délai permet au navigateur d'enregistrer les styles appliqués avant que la transition ne soit appliquée.

Pour implémenter ce délai, utilisez window.setTimeout() pour reporter l'ajout de la classe CSS contenant la transition :

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

Vous pouvez également inclure une classe de déclenchement de transition (target-fadein-begin) dans le code HTML lors de son chargement :

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

En répondant à ces critères, les transitions CSS déclenchées via JavaScript peuvent fonctionner comme prévu, permettant animations fluides.

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!