Pourquoi la définition de la propriété CSS à l'aide de Promise.then ne se produit-elle pas réellement au bloc then?

Veuillez essayer d'exécuter l'extrait de code suivant, puis cliquez sur la case.

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none'
        box.style.transform = ''
        resolve('Transition complete')
      }, 2000)
    }).then(() => {
      box.style.transition = ''
    })
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>

Ce que j'attends:

• Le clic se produit
• La boîte commence à traduire horizontalement par 100 pixels (cette action prend deux secondes)
• Au clic, un nouveau Promiseest également créé. A l'intérieur Promise, une setTimeoutfonction est réglée sur 2 secondes
• Une fois l'action terminée (deux secondes se sont écoulées), setTimeoutexécute sa fonction de rappel et définit la valeur transitionnone. Après cela, setTimeoutrevient également transformà sa valeur d'origine, rendant ainsi la boîte à apparaître à l'emplacement d'origine.
• La boîte apparaît à l'emplacement d'origine sans problème d' effet de transition ici
• Une fois toutes ces opérations terminées, redéfinissez la transitionvaleur de la boîte à sa valeur d'origine

Cependant, comme on peut le voir, la transitionvaleur ne semble pas être nonelors de l'exécution. Je sais qu'il existe d'autres méthodes pour atteindre ce qui précède, par exemple en utilisant des images clés et transitionend, mais pourquoi cela se produit-il? J'ai explicitement mis le transitiondos à sa valeur d'origine seulement après la setTimeoutfin de son rappel, résolvant ainsi la promesse.

ÉDITER

Selon la demande, voici un gif du code affichant le comportement problématique:

La boucle d'événements regroupe les changements de style. Si vous modifiez le style d'un élément sur une ligne, le navigateur n'affiche pas ce changement immédiatement; il attendra la prochaine image d'animation. C’est pourquoi, par exemple

elm.style.width = '10px';
elm.style.width = '100px';

n'entraîne pas de scintillement; le navigateur se soucie uniquement des valeurs de style définies une fois que tout Javascript est terminé.

Le rendu se produit une fois que tout Javascript est terminé, y compris les microtâches . La .thenpromesse se produit dans une microtâche (qui s'exécutera effectivement dès que tous les autres Javascript auront terminé, mais avant toute autre chose - comme le rendu - a eu une chance de s'exécuter).

Ce que vous faites, c'est que vous définissez la transitionpropriété ''dans la microtâche, avant que le navigateur ne commence à rendre la modification provoquée par style.transform = ''.

Si vous réinitialisez la transition vers la chaîne vide après a requestAnimationFrame(qui s'exécutera juste avant la prochaine repeinture), puis après a setTimeout(qui s'exécutera juste après la prochaine repeinture), cela fonctionnera comme prévu:

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    setTimeout(() => {
      box.style.transition = 'none'
      box.style.transform = ''
      // resolve('Transition complete')
      requestAnimationFrame(() => {
        setTimeout(() => {
          box.style.transition = ''
        });
      });
    }, 2000)
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class="box"></div>

Vous êtes confronté à une variation de la transition qui ne fonctionne pas si l'élément commence par un problème caché , mais directement sur la transitionpropriété.

Vous pouvez vous référer à cette réponse pour comprendre comment le CSSOM et le DOM sont liés pour le processus de "redessiner".
Fondamentalement, les navigateurs attendent généralement le prochain cadre de peinture pour recalculer toutes les nouvelles positions de boîte et ainsi appliquer les règles CSS au CSSOM.

Ainsi, dans votre gestionnaire Promise, lorsque vous réinitialisez le transitionà "", le transform: ""n'a toujours pas été calculé. Lorsqu'il sera calculé, le transitionsera déjà réinitialisé ""et le CSSOM déclenchera la transition pour la mise à jour de la transformation.

Cependant, nous pouvons forcer le navigateur à déclencher une "refusion" et ainsi nous pouvons lui faire recalculer la position de votre élément, avant de réinitialiser la transition vers "".

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none'
        box.style.transform = ''
        box.offsetWidth; // this triggers a reflow
        resolve('Transition complete')
      }, 2000)
    }).then(() => {
      box.style.transition = ''
    })
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>

Ce qui rend l'utilisation de la Promesse tout à fait inutile:

const box = document.querySelector('.box')
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)'
    setTimeout(() => {
      box.style.transition = 'none'
      box.style.transform = ''
      box.offsetWidth; // this triggers a reflow
      // even synchronously
      box.style.transition = ''
    }, 2000)
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>

Et pour une explication sur les micro-tâches, comme Promise.resolve()ou MutationEvents , ou queueMicrotask(), vous devez comprendre qu'elles seront exécutées dès que la tâche en cours sera terminée, 7ème étape du modèle de traitement de boucle d'événement , avant les étapes de rendu .
Donc, dans votre cas, c'est très similaire à une exécution synchrone.

Soit dit en passant, attention aux micro-tâches peuvent être aussi bloquantes qu'une boucle while:

// this will freeze your page just like a while(1) loop
const makeProm = ()=> Promise.resolve().then( makeProm );

J'apprécie que ce n'est pas tout à fait ce que vous recherchez, mais - par curiosité et par souci d'exhaustivité - je voulais voir si je pouvais écrire une approche CSS uniquement à cet effet.

Presque ... mais il s'avère que je devais encore inclure une seule ligne de javascript.

Exemple de travail:

document.querySelector('.box').addEventListener('animationend', (e) => e.target.blur());

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  cursor: pointer;
}

.box:focus {
 animation: boxAnimation 2s ease;
}

@keyframes boxAnimation {
  100% {transform: translateX(100px);}
}

<div class="box" tabindex="0"></div>

Je crois que votre problème est simplement que .thenvous définissez le transitionsur '', alors que vous devriez le régler nonecomme vous l'avez fait dans le rappel de la minuterie.

const box = document.querySelector('.box');
box.addEventListener('click', e => {
  if (!box.style.transform) {
    box.style.transform = 'translateX(100px)';
    new Promise(resolve => {
      setTimeout(() => {
        box.style.transition = 'none';
        box.style.transform = '';
        resolve('Transition complete');
      }, 2000)
    }).then(() => {
     box.style.transition = 'none'; // <<----
    })
  }
})

.box {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: #121212;
  transition: all 2s ease;
}

<div class = "box"></div>