Pourquoi les transitions CSS ne fonctionnent-elles pas sur les éléments initialement masqués ?

Les transitions CSS ne fonctionnent pas sur les éléments initialement masqués

Comprendre le problème

Dans le scénario décrit, il y a deux divs , dont l'un est initialement masqué à l'aide de display:none. Lorsque le div caché est révélé à l'aide de méthodes telles que show() ou toggle(), la transition de ses propriétés ne se produit pas correctement. Au lieu de cela, le div apparaît instantanément à la position finale souhaitée.

Cause du comportement

Pour comprendre ce comportement, nous devons approfondir la relation entre le CSSOM ( CSS Object Model) et le DOM (Document Object Model).

Les transitions CSS reposent sur la connaissance des valeurs de style calculées initiales de l'élément pour déterminer le point de départ de la transition. Cependant, les éléments avec display:none n'ont pas de valeurs de style calculées car ils ne sont pas considérés comme visibles dans le CSSOM.

Influence de la redistribution

Reflow est une opération du navigateur qui recalcule la mise en page du document en fonction des modifications apportées au DOM ou aux règles de style. Lorsque display:none est supprimé, le navigateur lance une redistribution pour mettre à jour le DOM et les valeurs de style calculées.

Dans le scénario donné, si la transition commence avant la redistribution, les valeurs de style calculées initiales pour le div caché sera invalide, entraînant une apparition abrupte.

Résoudre le problème

Option 1 : Utiliser $.animate()

$.animate() déclenche une redistribution avant d'exécuter l'animation, garantissant que les valeurs de style calculées sont à jour.

Option 2 : forcer manuellement une redistribution

L'utilisation de requestAnimationFrame() nous permet de planifier l'exécution du code avant la prochaine opération de peinture. À l'intérieur du rappel, nous pouvons forcer une redistribution à l'aide d'une méthode telle que document.body.offsetHeight, puis déclencher immédiatement la transition en définissant les valeurs de propriété CSS souhaitées.

Conclusion

L'apparition brutale d'éléments initialement masqués lors des transitions CSS est due au manque de valeurs de style calculées valides. En comprenant le processus de redistribution et en utilisant des techniques pour forcer une redistribution, nous pouvons garantir des transitions fluides pour les éléments initialement masqués.

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!