Neden Promise.then kullanarak CSS özelliği ayarlama then bloğunda aslında gerçekleşmiyor?

Lütfen aşağıdaki kod parçasını çalıştırmayı deneyin ve ardından kutuyu tıklayın.

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>

Ne olmasını bekliyorum:

• Tıklama olur
• Kutu yatay olarak 100 piksel çevirmeye başlar (bu işlem iki saniye sürer)
• Tıklandığında yeni Promisebir de oluşturulur. İçeride Promise, bir setTimeoutfonksiyon 2 saniyeye ayarlandı
• Eylem tamamlandıktan sonra (iki saniye geçtikten sonra), setTimeoutgeri arama işlevini çalıştırır ve transitionyok olarak ayarlar . Bunu yaptıktan sonra , orijinal değerine setTimeoutgeri döner transform, böylece kutunun orijinal konumunda görünmesini sağlar.
• Kutu, orijinal konumda burada geçiş etkisi sorunu olmadan görünür
• Bunların hepsi bittikten sonra transition, kutunun değerini orijinal değerine geri ayarlayın

Ancak, görülebileceği gibi, transitiondeğer noneçalışırken görünmüyor . Yukarıdakileri başarmak için başka yöntemler olduğunu biliyorum, örneğin anahtar kare kullanma ve transitionendneden bu oluyor? Ben açıkça ayarlanmış transitionsadece orijinal değerine geri sonrasındasetTimeout böylece Promise çözme, onun geri arama bitirir.

DÜZENLE

İsteğe bağlı olarak, sorunlu davranışı gösteren kodun bir gif:

Olay döngüsü toplu tarzı değişir. Bir satırdaki bir öğenin stilini değiştirirseniz, tarayıcı bu değişikliği hemen göstermez; bir sonraki animasyon karesine kadar bekleyecek. Bu yüzden, örneğin

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

titremeye yol açmaz; tarayıcı yalnızca tüm Javascript tamamlandıktan sonra ayarlanan stil değerlerine önem verir.

Oluşturma , mikro görevler dahil tüm Javascript tamamlandıktan sonra gerçekleşir . Bir Promise'in bir MicroTask oluşur (diğer tüm JavaScript bittikten kadar etkili olan en kısa sürede çalışır, ancak her şeyden önce - vadede şansı etti - Böyle rendering gibi)..then

Yaptığınız şey , tarayıcıdan kaynaklanan değişikliği gerçekleştirmeye başlamadan önce transitionözelliği ''mikro görevde ayarlamanızdır style.transform = ''.

Boş dizeye geçişi a requestAnimationFrame(sonraki yeniden boyamadan hemen önce çalışacak) ve sonra da setTimeout(sonraki yeniden boyamadan hemen sonra çalışacak ) sonra sıfırlarsanız, beklendiği gibi çalışır:

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>

Öğe gizli sorunu başlatırsa , doğrudan transitionözellikte geçişin bir varyasyonuyla karşılaşıyorsunuz .

CSSOM ve DOM'un "yeniden çizme" işlemi için nasıl bağlandığını anlamak için bu cevaba başvurabilirsiniz .
Temel olarak, tarayıcılar genellikle tüm yeni kutu konumlarını yeniden hesaplamak ve böylece CSS kurallarını CSSOM'a uygulamak için bir sonraki boyama çerçevesine kadar bekleyecektir.

Senin Promise işleyicisinde Yani, sıfırlamak zaman transitioniçin "", transform: ""hala henüz hesaplanmış değil. Hesaplanacağı zaman transition, zaten sıfırlanmış olacak ""ve CSSOM dönüşüm güncellemesi için geçişi tetikleyecektir.

Ancak, tarayıcıyı bir "yeniden akış" tetiklemeye zorlayabiliriz ve böylece geçişi sıfırlamadan önce öğenizin konumunu yeniden hesaplayabiliriz "".

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>

Bu, Sözün kullanımını gereksiz kılar:

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>

Ve mikro görevler gibi üzerine bir açıklama Promise.resolve()veya MutationEvents ya queueMicrotask(), onlar yakında şimdiki görev, yapılır gibi ran alırsınız anlamamız gerekir Olay döngü işleme modelinin 7 adımı öncesinde, render adımlar .
Yani sizin durumunuzda, senkronize olarak çalıştırılmış gibi.

Bu arada, mikro görevlerin bir süre döngüsü kadar engelleme olabileceğine dikkat edin:

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

Aradığın şey bu değil, ama - meraktan ve bütünlük uğruna - bu etkiye sadece CSS yaklaşımını yazıp yazamayacağımı görmek istedim.

Neredeyse ... ama yine de tek bir javascript satırı eklemem gerekti.

Çalışma Örneği:

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>

Ben senin sorunu sadece olduğuna inandığınız senin içinde .thensen ayarlıyorsunuz transitionTo ''sen ayarlayarak gerekirken, noneZamanlayıcı geri aramasında olduğu gibi.

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>