Почему установка свойства CSS с помощью Promise.then на самом деле не происходит в блоке then?

Пожалуйста, попробуйте запустить следующий фрагмент, затем нажмите на поле.

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>

Что я ожидаю, что произойдет:

• Клик происходит
• Box начинает перевод по горизонтали на 100 пикселей (это действие занимает две секунды)
• При нажатии новая Promiseтакже создается. Внутри сказал Promise, setTimeoutфункция установлена ​​на 2 секунды
• После того, как действие завершено (прошло две секунды), setTimeoutзапускается функция обратного вызова и устанавливается transitionзначение none. После этого setTimeoutтакже возвращается transformк своему первоначальному значению, таким образом отображая поле, чтобы появиться в исходном местоположении.
• Поле появляется в исходном местоположении без проблем с эффектом перехода здесь
• После того, как все это закончится, установите transitionзначение окна обратно в исходное значение

Тем не менее, как можно видеть, transitionзначение, по-видимому, не noneпри запуске. Я знаю, что есть другие методы для достижения вышеизложенного, например, использование ключевого кадра и т.д. transitionend, но почему это происходит? Я явно установить transitionобратно в исходное значение только послеsetTimeout того, как заканчивает свой обратный вызов, таким образом разрешения Promise.

РЕДАКТИРОВАТЬ

В соответствии с запросом, вот gif кода, отображающего проблемное поведение:

Цикл событий объединяет изменения стиля. Если вы измените стиль элемента в одной строке, браузер не покажет это изменение немедленно; это будет ждать до следующего кадра анимации. Вот почему, например,

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

не приводит к мерцанию; браузер заботится только о значениях стиля, установленных после завершения всего Javascript.

Рендеринг происходит после того, как завершен весь Javascript, включая микротрубы . .thenИз Promise происходит в microtask (который будет работать эффективно , как только все другие Javascript закончил, но прежде чем что - либо другое - такие как рендеринг - имел шанс бежать).

Что вы делаете, вы устанавливаете transitionсвойство ''в микрозадаче, прежде чем браузер начнет рендеринг изменений, вызванных style.transform = ''.

Если вы сбрасываете переход к пустой строке после a requestAnimationFrame(который будет запущен непосредственно перед следующей перерисовкой), а затем после a setTimeout(которая будет выполняться сразу после следующей перерисовки), он будет работать как ожидалось:

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>

Вы сталкиваетесь с изменением перехода, который не работает, если элемент запускает скрытую проблему, но непосредственно в transitionсвойстве.

Вы можете обратиться к этому ответу, чтобы понять, как CSSOM и DOM связаны для процесса «перерисовки».
По сути, браузеры обычно ждут следующего кадра рисования, чтобы пересчитать все новые позиции блока и, таким образом, применить правила CSS к CSSOM.

Таким образом, в вашем обработчике Promise, когда вы сбрасываете значение transitionдо "", значение transform: ""еще не было рассчитано. Когда он будет рассчитан, transitionон уже будет сброшен, ""и CSSOM запустит переход для обновления преобразования.

Тем не менее, мы можем заставить браузер вызвать «перекомпоновку», и, таким образом, мы можем заставить его пересчитать положение вашего элемента, прежде чем мы сбросим переход к "".

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>

Что делает использование Обещания совершенно ненужным:

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>

И для объяснения микро-задач, таких как Promise.resolve()или MutationEvents , илиqueueMicrotask() вы должны понимать, что они будут запускаться, как только текущая задача будет выполнена, 7-й шаг модели обработки цикла событий , перед этапами рендеринга .
Так что в вашем случае это очень похоже на синхронный запуск.

Кстати, остерегайтесь микро-задач, которые могут блокировать цикл while:

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

Я ценю, что это не совсем то, что вы ищете, но - из любопытства и ради полноты - я хотел посмотреть, смогу ли я написать подход, основанный только на CSS, для этого эффекта.

Почти ... но, оказывается, мне все равно пришлось включить одну строчку javascript.

Рабочий пример:

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>

Я полагаю, что ваша проблема заключается только в том, что .thenвы устанавливаете transitionдля '', когда вы должны установить его, noneкак это было в обратном вызове таймера.

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>