Pourquoi les transitions CSS échouent-elles lorsqu'elles sont appliquées via JavaScript ?

Correction des transitions CSS lorsqu'elles sont attribuées via JavaScript

Lorsque vous essayez d'appliquer des transitions CSS3 via JavaScript, vous pouvez rencontrer une situation dans laquelle les transitions spécifiées échouent à exécuter, malgré l'application des styles corrects. Ce comportement peut être déroutant, surtout si les transitions fonctionnent lorsqu'elles sont appliquées directement via l'inspecteur du navigateur.

La cause sous-jacente

Pour bien comprendre le problème, il faut comprendre le mécanique des transitions CSS. Trois étapes cruciales doivent se produire pour qu'une transition prenne effet :

1. L'élément ciblé doit avoir la propriété de transition explicitement définie (par exemple, transition : opacité 2s ;).
2. L'élément doit avoir la valeur initiale de la propriété de transition définie (par exemple, opacité : 0 ;).
3. La nouvelle valeur de la propriété de transition doit être appliquée (par exemple, opacité : 1 ;).

Lorsque JavaScript attribue des classes de manière dynamique, comme dans le cas de l'exemple fourni, il existe un problème potentiel. Le navigateur a besoin de temps pour traiter ces modifications, et l'attribution dynamique de la classe cible (par exemple, ".target-fadein") peut ne pas fournir le délai nécessaire.

Solution

Pour résoudre ce problème, un délai est nécessaire avant d'attribuer la classe cible. Cela garantit que le navigateur dispose de suffisamment de temps pour appliquer la propriété de transition et préparer l'animation. L'extrait de code suivant illustre l'utilisation d'un délai lors de l'application de la classe cible :

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

Alternativement, vous pouvez ajouter la classe cible ".target-fadein-begin" directement dans le HTML, afin qu'elle soit analysée en cours de chargement et prêt pour la transition.

Informations supplémentaires

Il est important de reconnaître que le simple ajout d'une transition à un élément ne déclenche pas l'animation. L'animation réelle est déclenchée en modifiant la valeur de la propriété de transition. Cela explique pourquoi la définition manuelle des valeurs de propriété initiales et nouvelles dans l'inspecteur fonctionne.

Pour plus de précisions, considérez l'extrait de code suivant :

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

Dans ce scénario, le premier bloc fonctionne car les trois conditions d’une transition sont remplies. L'élément a une transition définie, l'opacité initiale est définie sur 0 et la nouvelle opacité est définie sur 1. Le deuxième bloc échoue car la valeur d'opacité initiale n'est pas explicitement définie avant l'application de la classe de transition. Le troisième bloc fonctionne car un délai permet au navigateur de traiter le paramètre de valeur initiale avant que la transition ne soit appliqué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!