Por que a configuração da propriedade CSS usando Promise.then realmente não acontece no bloco then?

Tente executar o seguinte snippet e clique na caixa.

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>

O que eu espero que aconteça:

• Clique acontece
• A caixa começa a traduzir horizontalmente em 100px (esta ação leva dois segundos)
• Ao clicar, um novo Promisetambém é criado. Por dentro Promise, uma setTimeoutfunção é definida para 2 segundos
• Depois que a ação é concluída (dois segundos se passaram), setTimeoutexecuta sua função de retorno de chamada e define transitioncomo nenhum. Depois de fazer isso, setTimeouttambém reverte transformpara o valor original, fazendo com que a caixa apareça no local original.
• A caixa aparece no local original sem nenhum problema de efeito de transição aqui
• Depois de concluir tudo isso, defina o transitionvalor da caixa de volta ao seu valor original

No entanto, como pode ser visto, o transitionvalor não parece estar noneem execução. Eu sei que existem outros métodos para alcançar o que foi dito acima, por exemplo, usando o quadro-chave e transitionend, mas por que isso acontece? Eu explicitamente defini o valor de transitionvolta ao seu valor original somente após o término do setTimeoutretorno de chamada, resolvendo a Promessa.

EDITAR

Conforme solicitação, aqui está um gif do código que exibe o comportamento problemático:

O loop de eventos agrupa as alterações de estilo. Se você alterar o estilo de um elemento em uma linha, o navegador não mostrará essa alteração imediatamente; esperará até o próximo quadro de animação. É por isso que, por exemplo

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

não resulta em cintilação; o navegador se preocupa apenas com os valores de estilo definidos após a conclusão de todo o Javascript.

A renderização ocorre após a conclusão de todo o Javascript, incluindo microtasks . O .thende uma promessa ocorre em uma microtask (que será executada efetivamente assim que todos os outros Javascript forem concluídos, mas antes que qualquer outra coisa - como renderização - tenha a chance de ser executada).

O que você está fazendo é definir a transitionpropriedade ''no microtask, antes que o navegador comece a renderizar a alteração causada por style.transform = ''.

Se você redefinir a transição para a sequência vazia depois de um requestAnimationFrame(que será executado logo antes da próxima repintura) e depois de um setTimeout(que será executado logo após a próxima repintura), funcionará conforme o esperado:

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>

Você está enfrentando uma variação do transição não funciona se o elemento iniciar um problema oculto , mas diretamente natransitionpropriedade

Você pode consultar esta resposta para entender como o CSSOM e o DOM estão vinculados para o processo de "redesenho".
Basicamente, os navegadores geralmente esperam até o próximo quadro de pintura para recalcular todas as novas posições da caixa e, assim, aplicar regras de CSS ao CSSOM.

Portanto, no manipulador Promise, quando você redefine o transitionpara "", o transform: ""ainda não foi calculado ainda. Quando for calculado, o transitionjá terá sido redefinido ""e o CSSOM acionará a transição para a atualização da transformação.

No entanto, podemos forçar o navegador a acionar um "reflow" e, portanto, podemos fazer com que recalcule a posição do seu elemento, antes de redefinir a transição para"" .

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>

O que torna o uso da promessa bastante desnecessário:

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>

E para obter uma explicação sobre as micro-tarefas, como Promise.resolve()ou MutationEvents , ou queueMicrotask(), você precisa entender que elas serão executadas assim que a tarefa atual for concluída, sétima etapa do modelo de processamento do loop de eventos , antes das etapas de renderização .
Portanto, no seu caso, é muito parecido com se fosse executado de forma síncrona.

A propósito, cuidado com as micro-tarefas podem ser tão bloqueadoras quanto um loop while:

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

Aprecio que isso não é exatamente o que você está procurando, mas - por curiosidade e por uma questão de integridade - eu queria ver se eu poderia escrever uma abordagem somente CSS para esse efeito.

Quase ... mas acontece que eu ainda tinha que incluir uma única linha de javascript.

Exemplo de trabalho:

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>

Acredito que seu problema seja exatamente o que .thenvocê está definindo transitioncomo '', quando deveria defini-lo nonecomo no retorno de chamada do timer.

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>