Zachycení událostí CSS animací v Javascriptu

V CSS jsou dva typy vlastností pro animaci: transition a animation. První specifikuje průběh přechodu mezi hodnotami vlastností - např. jak rychle a plynule dojde ke změně barvy pozadí. Vlastnost animation proti tomu umožňuje detailně deklarovat sekvence animací a ty pak použít. Pokud si chcete přečíst více, doporučuji článek na vzhurudolu.cz nebo css-tricks.com.

Kromě toho, že mohou být CSS animace často výkonnější, než animace v JS, jejich použitím se v JS zbavíme spousty kódu, který by zbytečně řešil pouze vzhled (view). No jo, jenže nepřipravíme se tím i o možnost reakce na průběh animace? Kdepak. Naštěstí je k dispozici pár užitečných eventů.

Transition eventy

Pro sledování průběhu transition existuje event transitionend. Další eventy: transitionstart, transitionrun a transitioncancel jsou zatím ve vývoji a jejich implementace v prohlížečích je různá. Event transitionend je spuštěn při dokončení transition animace a obsahuje mimo jiné třeba údaje o tom, která vlastnost je animována a jak dlouho animace probíhala.

div {
  background-color: red;
  transition: 2s;
}

div:hover {
 background-color: blue;
}

document
  .querySelector('div')
  .addEventListener('transitionend', (event) => {
    console.log(event.propertyName) // "background-color"
    console.log(event.elapsedTime) // "2" (sekundy)
  }

Podobný příklad si můžete vyzkoušet zde.

Pozor! Event se spustí jen, pokud je animace dokončena. V případě, že je vlastnost transition z elementu odebrána nebo je element skrytý, než se animace dokončí, event se nespustí. Důležité je taky zmínit, že pokud je hodnota transition nastavena na více vlastností, event se spustí vícekrát - jednou pro každou vlastnost.

Animation eventy

U animation jsou k dispozici eventy: animationstart, animationiteration a animationend. Event animationcancel je zatím ve vývoji a podpora prohlížečů je v tuto chvíli téměř neexistující. Podobně jako u transitionend obsahují eventy údaje o době běhu animace a navíc i o názvu animace. Na začátku je spuštěn animationstart a na konci animationend. Event animationiteration je spuštěn na konci každé iterace.

@keyframes flash {
  50% {
    opacity: 0;
  }
} 

div {
  animation: flash 3s 2;
}

const div = document.querySelector('div')

div.addEventListener('animationstart', (event) => {
  console.log(event.animationName) // "flash"
})
div.addEventListener('animationiteration', (event) => {
  console.log(event.elapsedTime) // "3" (sekundy)
})
div.addEventListener('animationend', (event) => {
  console.log(event.type) // "animationend"
})

Podobnou ukázku si můžete vyzkoušet zde.

Stejně jako u transitionend zde platí, že animationend se nespustí, pokud nebude animace řádně dokončena - například bude před dokončením element skryt, odebrán, nebo mu bude odebrána vlastnost animation.

Podpora

V době psaní tohoto článku platí, že pokud prohlížeč podporuje CSS Transition a CSS Animation, podporuje i jejich eventy, které už nejsou pouze ve vývoji (viz výše). Podpora je tedy u všech moderních prohlížečů slušná.

---

Používáte CSS animace nebo se držíte JS, případně kombinace obou? Dejte nám vědět v komentářích