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

La transition CSS ne fonctionne pas initialement sur les éléments masqués

Lorsque vous essayez d'animer la propriété d'un élément masqué à l'aide de transitions CSS, vous pouvez rencontrer un problème où l'élément s'affiche instantanément à sa position finale. Cela est dû à la relation entre le modèle d'objet CSS (CSSOM) et le modèle d'objet de document (DOM).

Le rôle de la redistribution et du CSSOM

Les transitions CSS déterminent leur état initial en fonction des styles calculés d'un élément. Cependant, lorsqu'un élément a display: none, le navigateur ignore ses styles calculés puisque l'élément est effectivement invisible au CSSOM.

Dans votre scénario, lorsque vous déclenchez la transition sur .b, il n'a pas de style calculé , car il est caché. Par conséquent, la transition ne peut pas s'initialiser correctement.

Forcer une redistribution

Pour résoudre ce problème, vous pouvez forcer le navigateur à mettre à jour les styles calculés de l'élément masqué avant de lancer la transition. Cela se fait en déclenchant une redistribution.

La redistribution est le processus par lequel le navigateur recalcule la mise en page et les styles calculés de la page entière. Cela peut être déclenché par certaines méthodes DOM ou par le navigateur lui-même lorsque cela est nécessaire, par exemple lorsque l'écran est actualisé.

À l'aide de l'API requestAnimationFrame(), vous pouvez demander au navigateur d'effectuer une redistribution juste avant le prochain paint. l’opération se produit. Cela garantit que les styles calculés de votre élément sont à jour lorsque la transition commence.

Code mis à jour

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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!