Warum erfolgt das Festlegen der CSS-Eigenschaft mithilfe von Promise.then nicht tatsächlich im then-Block?

Bitte versuchen Sie, das folgende Snippet auszuführen, und klicken Sie dann auf das Feld.

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>

Was ich erwarte:

• Klicken passiert
• Box beginnt mit der horizontalen Übersetzung um 100px (diese Aktion dauert zwei Sekunden).
• Beim Klicken wird auch eine neue Promiseerstellt. Im Inneren Promiseist eine setTimeoutFunktion auf 2 Sekunden eingestellt
• Nach Abschluss der Aktion (zwei Sekunden sind verstrichen) wird setTimeoutdie Rückruffunktion ausgeführt und transitionauf "Keine" gesetzt. Danach wird setTimeoutauch transformder ursprüngliche Wert wiederhergestellt, sodass das Feld an der ursprünglichen Position angezeigt wird.
• Die Box erscheint an der ursprünglichen Stelle ohne Übergangseffekt Problem hier
• Setzen Sie nach all diesen Vorgängen den transitionWert der Box wieder auf den ursprünglichen Wert zurück

Wie jedoch zu sehen ist, transitionscheint der Wert nonebeim Ausführen nicht zu sein . Ich weiß, dass es andere Methoden gibt, um das oben genannte zu erreichen, z. B. die Verwendung von Keyframe und transitionend, aber warum passiert das? Ich habe das transitionZurück explizit auf seinen ursprünglichen Wert gesetzt, nachdem der setTimeoutRückruf beendet wurde, wodurch das Versprechen aufgelöst wurde.

BEARBEITEN

Auf Anfrage ist hier ein GIF des Codes, der das problematische Verhalten anzeigt:

Die Ereignisschleife stapelt Stiländerungen . Wenn Sie den Stil eines Elements in einer Zeile ändern, zeigt der Browser diese Änderung nicht sofort an. Es wird bis zum nächsten Animationsframe warten. Deshalb zum Beispiel

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

führt nicht zu Flackern; Der Browser kümmert sich nur um die Stilwerte, die nach Abschluss von Javascript festgelegt wurden.

Das Rendern erfolgt nach Abschluss von Javascript, einschließlich Mikrotasks . Das .thenVersprechen wird in einer Mikrotask ausgeführt (die effektiv ausgeführt wird, sobald alle anderen Javascript-Vorgänge abgeschlossen sind, aber bevor etwas anderes - wie z. B. das Rendern - ausgeführt werden kann).

Sie setzen die transitionEigenschaft ''in der Mikrotask auf, bevor der Browser mit dem Rendern der durch verursachten Änderungen beginnt style.transform = ''.

Wenn Sie den Übergang zur leeren Zeichenfolge nach a requestAnimationFrame(der kurz vor dem nächsten Repaint ausgeführt wird) und dann nach a setTimeout(der unmittelbar nach dem nächsten Repaint ausgeführt wird) zurücksetzen, funktioniert dies wie erwartet:

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>

Sie sehen sich einer Variation des Übergangs gegenüber, die nicht funktioniert, wenn das Element ein verstecktes Problem startet , sondern direkt auf der transitionEigenschaft.

Sie können sich auf diese Antwort beziehen, um zu verstehen, wie CSSOM und DOM für den "Neuzeichnungsprozess" verknüpft sind.
Grundsätzlich Browser wird in der Regel bis zur nächsten warten Malerei Frame aller neue Box Positionen neu zu berechnen und damit CSS - Regeln auf die CSSOM anzuwenden.

Wenn Sie in Ihrem Promise-Handler das auf zurücksetzen transition, ""wurde das transform: ""noch nicht berechnet. Wenn es berechnet wird, wurde das transitionbereits zurückgesetzt ""und das CSSOM löst den Übergang für die Transformationsaktualisierung aus.

Wir können den Browser jedoch zwingen, einen "Reflow" auszulösen, und so die Position Ihres Elements neu berechnen, bevor wir den Übergang auf zurücksetzen "".

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>

Was die Verwendung des Versprechens ziemlich unnötig macht:

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>

Und für eine Erklärung zu Mikroaufgaben wie Promise.resolve()oder MutationEvents oder queueMicrotask(), Sie müssen verstehen, dass sie ausgeführt werden, sobald die aktuelle Aufgabe erledigt ist, 7. Schritt des Event-Loop-Verarbeitungsmodells , vor den Rendering-Schritten .
In Ihrem Fall ist es also sehr ähnlich, als würde es synchron ausgeführt.

Übrigens, Vorsicht, Mikro-Tasks können so blockierend sein wie eine while-Schleife:

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

Ich weiß, dass dies nicht ganz das ist, wonach Sie suchen, aber aus Neugier und der Vollständigkeit halber wollte ich sehen, ob ich einen Nur-CSS-Ansatz für diesen Effekt schreiben kann.

Fast ... aber es stellte sich heraus, dass ich immer noch eine einzige Zeile Javascript einfügen musste.

Arbeitsbeispiel:

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>

Ich glaube , das Problem ist nur , dass in Ihren .thenSie setzen transitionauf '', wenn Sie es seine Einstellung sollten , nonewie Sie im Timer - Rückruf taten.

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>