Pourquoi la transition CSS ne fonctionne-t-elle pas sur les éléments initialement masqués ?

La transition CSS ne fonctionne pas sur l'élément initialement masqué

Lorsqu'un élément est initialement masqué à l'aide de l'affichage CSS : aucune, toutes les transitions CSS qui lui sont appliquées ne se déclenchera pas lorsque sa visibilité est modifiée. En effet, les transitions CSS reposent sur le style calculé initial de l'élément, qui pour un élément masqué, sera vide.

CSSOM vs. DOM

Pour comprendre ce comportement, il est important de faire la distinction entre le modèle objet CSS (CSSOM) et le modèle objet document (DOM). Le DOM représente la structure hiérarchique du document HTML, tandis que le CSSOM contient les styles calculés pour chaque élément.

Reflow et Paint

Lorsque la visibilité d'un élément est modifié, le navigateur doit mettre à jour le CSSOM et redistribuer la page pour refléter les modifications. Reflow recalcule les styles et les positions calculés des éléments en fonction de leurs règles CSS. La peinture est le processus de rendu de la page à l'écran, qui se produit après la redistribution.

Initiation de transition

Les transitions CSS fonctionnent par interpolation entre le style calculé initial de l'élément et son style final. Lorsqu'un élément est initialement masqué, son style calculé sera vide, donc l'algorithme de transition ne peut pas créer l'état initial.

Solution : Forcer la redistribution

Pour déclencher la transition sur un élément masqué, il faut forcer une refusion après avoir changé sa visibilité. Ceci peut être réalisé en utilisant l'API requestAnimationFrame, qui exécute un rappel juste avant que le navigateur ne peigne la page.

En utilisant requestAnimationFrame, il est possible d'appliquer la transition CSS après que le navigateur a mis à jour le CSSOM, permettant la transition pour démarrer correctement.

Exemple

Voici une version modifiée de votre code utilisant requestAnimationFrame pour forcer une redistribution :

$('button').on('click', function() {
  $('.b').show();

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

En conclusion, les transitions CSS ne fonctionneront pas sur les éléments initialement masqués car le CSSOM ne contient pas de style calculé initial pour eux. Pour déclencher la transition, il faut forcer une refusion après avoir changé la visibilité de l'élément.

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!