Pourquoi les transitions CSS sautent-elles ou ne parviennent-elles pas à déclencher des rappels ?

Transition CSS ignorée ou rappel non invoqué : comprendre la cause

En CSS, les transitions offrent un moyen élégant d'animer en douceur les changements de propriété au fil du temps. Cependant, certaines situations peuvent survenir lorsque les transitions ne s'exécutent pas ou que les rappels associés restent non appelés.

Un de ces scénarios se produit lors de l'attribution de nouvelles valeurs d'emplacement à un élément de projectile pendant le développement du jeu. Bien que les appels jQuery aient été remplacés par du JS pur, la transition a semblé avoir été entièrement ignorée et aucun rappel n'a été déclenché.

Le mystère de la transition manquante

Curieusement, l'emballage le changement de position CSS dans un setTimeout de 1 ms a d'une manière ou d'une autre résolu le problème, même si parfois la transition était toujours contournée. Cette incohérence a soulevé la question : pourquoi setTimeout a-t-il aidé et pourquoi le rappel a-t-il parfois échoué ?

Le rôle des styles calculés

La clé pour comprendre ce comportement réside dans les styles calculés CSS. Lorsque vous définissez de nouveaux styles via JavaScript, le navigateur peut ne pas les appliquer immédiatement. Au lieu de cela, le style calculé de l'élément reste inchangé, entraînant une différence entre les styles en ligne et les valeurs calculées.

Dans le cas de l'élément projectile, bien que le style en ligne spécifie les valeurs gauche et supérieure, le style calculé Le style a initialement conservé les valeurs par défaut de 0px.

Impact sur les transitions

Les transitions s'appuient sur des styles calculés pour déterminer les états de début et de fin de l'animation. Lorsque le style calculé initial diffère du style en ligne à partir duquel vous essayez de passer, la transition n'a essentiellement aucun effet et semble sauter.

La solution : forcer une redistribution

Pour résoudre ce problème et garantir que les transitions s'exécutent toujours correctement, il est nécessaire de forcer le navigateur à effectuer une redistribution, qui recalcule les styles calculés.

Une façon d'y parvenir est d'accéder à une propriété qui nécessite styles à jour, tels que offsetHeight. Dans le code fourni, animdiv.offsetHeight déclenche la redistribution avant que les nouvelles valeurs gauche et supérieure ne soient attribuées.

Conclusion

En comprenant le problème avec les styles calculés, vous pouvez assurez-vous que les transitions CSS fonctionnent comme prévu et que les rappels sont invoqués de manière fiable. N'oubliez pas de forcer une refusion avant de faire la transition des éléments si vous observez un comportement irrégulier.

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!