TransitionEvent

Animatsiya bilan bir qatorda transition'lar haqida ham gaplashsak.

Buni qarangki, CSS orqali boshqariladigan transition'larni JS bilan kuzatish imkoni ham bor ekan.
Buni ham yaqinda bilib qoldim. 🤯

Masalan, ":hover" qilganda kengayadigan elementni olaylik:

#box {
  width: 50px;
  transition: 2s;
  transition-dalay: .5s;

  &:hover {
    width: 100px;
  }
}

Aytaylik, keygayib kichrayyotgan paytda, element ichidagi tugmacha yoki linklar "disabled" bo'lishi kerak (JS bilan). Buni qanday qilardingiz?

Misol uchun men "mouseenter", "mouseleave" event'laridan foydalanib, "setTimeout" orqali transition tugashini kuzatardim. Bunda albatta "timeout" vaqti "transition-duration" + "delay" ga teng bo'ladi.
Tepadagi misolga ko'ra 2 + 0.5 = 2.5 sekund.

Bu usul ishlaydi. Lekin ikkovi bir-biriga bog'liq bo'magan parallel operatsiyalar hisoblanadi. Chunki sinxronizatsiyani "qo'lda" qilyapmiz.

TransitionEvent bilan esa buni qilish ancha sodda:

const box = document.getElementById('#box');

box.addEventListener('transitionstart', () => button.disabled = true)
box.addEventListener('transitionend', () => button.disabled = false)

TransitionEvent o'zi 4 ta event'dan iborat:

1. transitionrun - transition'ni boshlovchi even sodir bo'lganda (hover, focus, click, v.h.k.) va "delay" taymeri boshalanganda.

2. transitionstart - aynan transition boshlangada, ya'ni o'zgarish boshlanganda; "delay" taymeri tugagadan keyin.

3. transitionend - transition tugaganda, ya'ni element o'zgarishi tugagach.

4. transitioncancel - transition paytida uni bekor qiladigan event sodir bo'lganda, ya'ni `transitionrun`'dan keyin, `transitionend`'dan oldin.