Tại sao cài đặt thuộc tính CSS bằng Promise.then không thực sự xảy ra ở khối sau đó?

Vui lòng thử và chạy đoạn mã sau, sau đó nhấp vào hộp.

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>

Những gì tôi mong đợi sẽ xảy ra:

• Nhấp chuột xảy ra
• Hộp bắt đầu dịch theo chiều ngang 100px (hành động này mất hai giây)
• Khi nhấp chuột, một cái mới Promisecũng được tạo ra. Bên trong cho biết Promise, một setTimeoutchức năng được đặt thành 2 giây
• Sau khi hành động hoàn thành (hai giây đã trôi qua), hãy setTimeoutchạy chức năng gọi lại của nó và đặt transitionthành không. Sau khi làm điều đó, setTimeoutcũng trở lại transformgiá trị ban đầu của nó, do đó làm cho hộp xuất hiện ở vị trí ban đầu.
• Hộp xuất hiện ở vị trí ban đầu không có vấn đề về hiệu ứng chuyển tiếp ở đây
• Sau khi tất cả kết thúc, đặt transitiongiá trị của hộp trở về giá trị ban đầu của nó

Tuy nhiên, như có thể thấy, transitiongiá trị dường như không phải là nonekhi chạy. Tôi biết rằng có các phương pháp khác để đạt được những điều trên, ví dụ như sử dụng keyframe và transitionend, nhưng tại sao điều này lại xảy ra? Tôi dứt khoát thiết lập transitiontrở lại giá trị ban đầu của nó chỉ sau khi các setTimeoutkết thúc cuộc gọi lại của nó, do đó giải quyết Promise.

BIÊN TẬP

Theo yêu cầu, đây là một gif của mã hiển thị hành vi có vấn đề:

Sự kiện vòng lặp lô phong cách thay đổi. Nếu bạn thay đổi kiểu của một thành phần trên một dòng, trình duyệt sẽ không hiển thị thay đổi đó ngay lập tức; nó sẽ đợi cho đến khung hình động tiếp theo. Đây là lý do tại sao, ví dụ

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

không dẫn đến nhấp nháy; trình duyệt chỉ quan tâm đến các giá trị kiểu được đặt sau khi tất cả Javascript đã hoàn thành.

Kết xuất xảy ra sau khi tất cả Javascript đã hoàn thành, bao gồm cả microt Nhiệm vụ . Các .thencủa một Promise xảy ra trong một microtask (mà hiệu quả sẽ chạy càng sớm càng tất cả javascript khác đã hoàn tất, nhưng trước khi bất cứ điều gì khác - chẳng hạn như dựng hình - đã có một cơ hội để chạy).

Những gì bạn đang làm là bạn đang đặt thuộc transitiontính ''vào microtask, trước khi trình duyệt bắt đầu hiển thị thay đổi do style.transform = ''.

Nếu bạn đặt lại quá trình chuyển đổi sang chuỗi trống sau một requestAnimationFrame(sẽ chạy ngay trước lần lặp lại tiếp theo), và sau đó setTimeout(sẽ chạy ngay sau lần lặp lại tiếp theo), nó sẽ hoạt động như mong đợi:

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>

Bạn đang phải đối mặt với một biến thể của quá trình chuyển đổi không hoạt động nếu phần tử bắt đầu sự cố ẩn , nhưng trực tiếp trên thuộc transitiontính.

Bạn có thể tham khảo câu trả lời này để hiểu cách CSSOM và DOM được liên kết cho quá trình "vẽ lại".
Về cơ bản, các trình duyệt thường sẽ đợi cho đến khung vẽ tiếp theo để tính toán lại tất cả các vị trí hộp mới và do đó để áp dụng các quy tắc CSS cho CSSOM.

Vì vậy, trong trình xử lý Promise của bạn, khi bạn đặt lại transitionthành "", transform: ""vẫn chưa được tính toán. Khi nó được tính toán, ý transitionchí đã được đặt lại ""và CSSOM sẽ kích hoạt quá trình chuyển đổi cho bản cập nhật biến đổi.

Tuy nhiên, chúng tôi có thể buộc trình duyệt kích hoạt "chỉnh lại dòng" và do đó chúng tôi có thể làm cho nó tính toán lại vị trí của phần tử của bạn, trước khi chúng tôi đặt lại quá trình chuyển đổi sang "".

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>

Điều này làm cho việc sử dụng Promise khá không cần thiết:

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>

Và đối với một lời giải thích trên vi nhiệm vụ, như Promise.resolve()hoặc MutationEvents , hoặc queueMicrotask(), bạn cần phải hiểu họ sẽ nhận ran ngay sau khi nhiệm vụ hiện nay được thực hiện, bước thứ 7 của mô hình xử lý sự kiện vòng , trước khi các bước vẽ .
Vì vậy, trong trường hợp của bạn, nó rất giống như nếu nó được chạy đồng bộ.

Nhân tiện, hãy cẩn thận các tác vụ vi mô có thể bị chặn như một vòng lặp while:

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

Tôi đánh giá cao đây không hoàn toàn là những gì bạn đang tìm kiếm, nhưng - vì tò mò và vì mục đích hoàn chỉnh - tôi muốn xem liệu tôi có thể viết một cách tiếp cận chỉ CSS cho hiệu ứng này không.

Gần như ... nhưng hóa ra tôi vẫn phải đưa vào một dòng javascript.

Ví dụ làm việc:

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>

Tôi tin rằng vấn đề của bạn chỉ là trong bạn .thenbạn đang thiết lập transitionđể '', khi bạn cần phải cài đặt nó vào nonenhư bạn đã làm trong giờ gọi lại.

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>