¿Por qué no se establece la propiedad CSS usando Promise.then en el bloque de entonces?

Intente ejecutar el siguiente fragmento y luego haga clic en el cuadro.

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>

Lo que espero que suceda:

• Click pasa
• Box comienza a traducir horizontalmente en 100 px (esta acción lleva dos segundos)
• Al hacer clic, Promisetambién se crea un nuevo . Dentro de dicho Promise, una setTimeoutfunción se establece en 2 segundos
• Una vez completada la acción (han transcurrido dos segundos), setTimeoutejecuta su función de devolución de llamada y se establece transitionen ninguno. Después de hacer eso, setTimeouttambién vuelve transforma su valor original, haciendo que el cuadro aparezca en la ubicación original.
• El cuadro aparece en la ubicación original sin ningún problema de efecto de transición aquí
• Después de que todos terminen, transitionvuelva a establecer el valor del cuadro en su valor original

Sin embargo, como se puede ver, el transitionvalor no parece ser nonecuando se ejecuta. Sé que hay otros métodos para lograr lo anterior, por ejemplo, utilizando fotogramas clave y transitionend, pero ¿por qué sucede esto? Me puse explícitamente el transitionnuevo a su valor original solamente después de la setTimeouttermina su devolución de llamada, resolviendo así la promesa.

EDITAR

Según la solicitud, aquí hay un gif del código que muestra el comportamiento problemático:

El bucle de eventos procesa cambios de estilo. Si cambia el estilo de un elemento en una línea, el navegador no muestra ese cambio de inmediato; esperará hasta el próximo cuadro de animación. Por eso, por ejemplo

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

no produce parpadeo; el navegador solo se preocupa por los valores de estilo establecidos después de que se haya completado todo Javascript.

La representación se produce después de que se haya completado todo Javascript, incluidas las microtask . El .thende una promesa se produce en una microtask (que se ejecutará de manera efectiva tan pronto como todos los demás Javascript hayan terminado, pero antes de que cualquier otra cosa, como el renderizado, haya tenido la oportunidad de ejecutarse).

Lo que está haciendo es establecer la transitionpropiedad ''en microtask, antes de que el navegador haya comenzado a representar el cambio causado por style.transform = ''.

Si restablece la transición a la cadena vacía después de un requestAnimationFrame(que se ejecutará justo antes de la próxima pintura), y luego después de un setTimeout(que se ejecutará justo después de la próxima pintura), funcionará como se esperaba:

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>

Se enfrenta a una variación de la transición que no funciona si el elemento comienza a ocultarse problema , sino directamente en la transitionpropiedad.

Puede consultar esta respuesta para comprender cómo se vinculan el CSSOM y el DOM para el proceso de "redibujo".
Básicamente, los navegadores generalmente esperan hasta el próximo cuadro de pintura para recalcular todas las nuevas posiciones de la caja y, por lo tanto, para aplicar las reglas CSS al CSSOM.

Así en el controlador Promise, cuando se restablece el transitionque "", el transform: ""todavía no se ha calculado todavía. Cuando se calculará, eltransition ya se habrá restablecido ""y el CSSOM activará la transición para la actualización de la transformación.

Sin embargo, podemos obligar al navegador a activar un "reflujo" y, por lo tanto, podemos hacer que vuelva a calcular la posición de su elemento, antes de restablecer la transición a "".

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>

Lo que hace que el uso de la promesa sea bastante innecesario:

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>

Y para obtener una explicación sobre las micro tareas, como Promise.resolve()o MutationEvents , o bien queueMicrotask(), debe comprender que se ejecutarán tan pronto como se complete la tarea actual, séptimo paso del modelo de procesamiento de bucle de eventos , antes de los pasos de representación .
Entonces, en su caso, es muy parecido a si se ejecutara sincrónicamente.

Por cierto, cuidado con las micro tareas pueden ser tan bloqueadoras como un ciclo while:

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

Aprecio que esto no sea exactamente lo que estás buscando, pero, por curiosidad y en aras de la exhaustividad, quería ver si podía escribir un enfoque solo de CSS para este efecto.

Casi ... pero resulta que todavía tenía que incluir una sola línea de javascript.

Ejemplo de trabajo

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>

Creo que su problema es sólo que en su .thense está ajustando el transitionque '', cuando debería estar fijándose a nonecomo lo hizo en la devolución de llamada del temporizador.

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>