Чому налаштування властивості CSS за допомогою Promise.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>

Що я очікую, що трапиться:

• Клацання відбувається
• Поле починає перекладати горизонтально на 100 пікселів (ця дія займає дві секунди)
• При натисканні Promiseтакож створюється новий . Усередині сказав Promise, A setTimeoutфункція встановлена на 2 секунди
• Після завершення дії (минуло дві секунди), setTimeoutзапускає функцію зворотного дзвінка і встановлює transitionзначення "ні". Після цього setTimeoutтакож повертається transformдо свого початкового значення, таким чином, поле відображається у вихідному місці.
• Поле з’являється в оригінальному місці, тут немає проблем з ефектом переходу
• Після закінчення цих transitionповернень поверніть значення початкового значення

Однак, як видно, transitionзначення, здається, не noneпрацює під час запуску. Я знаю, що існують інші методи досягнення вищезазначеного, наприклад, використання ключових кадрів і transitionend, але чому це відбувається? Я явно встановлюю transitionназад його початкове значення лише після того, як setTimeoutзакінчується зворотний дзвінок, таким чином вирішуючи Обіцяння.

EDIT

Відповідно до запиту, ось графічний код, що відображає проблематичну поведінку:

Змінюється стиль партії циклу подій . Якщо ви зміните стиль елемента в одному рядку, браузер не відображатиме ці зміни відразу; він зачекає наступного кадру анімації. Ось чому, наприклад

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

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

Візуалізація відбувається після завершення роботи Javascript, включаючи мікрозадачі . .thenЗ Promise відбувається в microtask (який буде працювати ефективно , як тільки всі інші Javascript закінчив, але перш ніж що - небудь інше - такі як рендеринг - мав шанс бігти).

Ви робите це налаштування transitionвластивості ''в мікрозадачі, перш ніж браузер почав відображати зміни, викликані style.transform = ''.

Якщо ви скинете перехід до порожнього рядка після requestAnimationFrame(який буде запускатися перед наступним перефарбуванням), а потім після 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-й крок моделі обробки циклу подій перед кроками візуалізації .
Тож у вашому випадку це дуже схоже на те, якби це було запущено синхронно.

До речі, остерігайтеся мікрозадач може бути таким же блокуючим, як цикл у той час:

// 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>