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

La transition CSS ne se déclenche pas pour les éléments cachés

Dans le développement Web, il est courant d'utiliser des transitions CSS pour animer les modifications apportées aux propriétés d'un élément. Cependant, une pierre d'achoppement courante survient lorsqu'un élément est initialement masqué (par exemple, avec display : none) puis devient visible, mais que la transition CSS ne s'active pas.

Dans les coulisses avec CSSOM et DOM

Pour comprendre ce comportement, nous devons considérer la relation entre le modèle d'objet CSS (CSSOM) et le modèle d'objet de document (DOM). Le DOM représente la structure HTML de la page, tandis que le CSSOM représente les styles calculés pour chaque élément.

Pendant le processus de rendu, les manipulations du DOM (par exemple, la modification de la propriété d'affichage) se produisent en premier. Ensuite, le navigateur recalcule les styles calculés (CSSOM) pour tous les éléments de la page, appelés redistribution ou mise en page. Enfin, les modifications sont rendues visuellement à l'écran (paint).

Impact sur les transitions CSS

Les transitions CSS nécessitent le style calculé initial de l'élément pour calculer le début État. Cependant, pour les éléments masqués, les styles calculés sont essentiellement nuls car ils ne sont pas affichés. Cela signifie que lorsqu'une transition est déclenchée, l'état initial n'est pas valide pour toute valeur transitoire.

Solutions

Pour résoudre ce problème, vous pouvez utiliser l'une des solutions suivantes approches :

• Forcer une redistribution : Utiliser requestAnimationFrame ou d'autres méthodes qui déclenchent une la redistribution force le navigateur à recalculer les styles calculés. En appelant une redistribution juste avant le déclenchement de la transition, vous vous assurez que les styles calculés sont à jour.
• Utilisez $.animate()** : .animate() en interne force une redistribution en déclenchant une manipulation DOM, puis en planifiant un rappel pour déclencher la transition. Cependant, cette approche est généralement plus lente que l'utilisation d'une méthode de redistribution directe.

Exemple

L'extrait de code suivant montre comment forcer une redistribution à l'aide de requestAnimationFrame :

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

  requestAnimationFrame(() => { // Force a reflow
    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

En utilisant requestAnimationFrame, nous garantissons que la transition CSS se déclenchera avec succès, même pour éléments initialement caché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!