Pourquoi les transitions d'éléments échouent-elles lorsqu'elles sont initialement masquées ?

Les transitions d'éléments échouent lorsqu'elles sont initialement masquées

Aperçu du scénario

Considérez deux éléments, étiquetés ' A' et 'B', où 'B' est initialement masqué à l'aide de display: none. Lorsque vous utilisez des transitions pour animer « B » lors de sa révélation avec des méthodes telles que $.show() ou $.toggle(), l'élément apparaît instantanément à sa position finale sans aucune animation.

Explication

La cause première réside dans la relation entre le modèle objet de document (DOM) et le modèle objet CSS (CSSOM). Les transitions CSS reposent sur la dernière valeur calculée d'un élément. Pour les éléments initialement masqués, la valeur calculée est display : none, ce qui supprime essentiellement l'élément du CSSOM.

Manipulation et redistribution du DOM

La phase de manipulation du DOM implique la mise à jour un objet JavaScript, qui est un processus asynchrone. En revanche, la phase de redistribution, qui met à jour les règles CSS et recalcule les styles calculés, n'a lieu que lorsque cela est nécessaire. Étant donné que les éléments initialement masqués n'ont pas de styles calculés, ils ne déclenchent pas de redistribution lors de la manipulation du DOM.

État initial de transition

En conséquence, lors de la transition pour ' B' démarre, l'état initial n'est pas défini car la refusion n'a pas encore eu lieu. Cela peut entraîner des transitions incorrectes.

Forcer une redistribution

Pour résoudre ce problème, vous pouvez forcer une redistribution avant de déclencher la transition. Vous pouvez y parvenir en utilisant Element.getBoundingClientRect() ou element.offsetHeight, qui nécessitent des valeurs calculées à jour et, par conséquent, forcent une redistribution.

Exemple amélioré avec Force Reflow

Voici un extrait de code révisé qui force une redistribution avant d'animer la transition :

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

En forçant une redistribution avant le déclenchement de la transition, vous vous assurez que les valeurs calculées sont à jour , permettant à la transition de fonctionner correctement.

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!