Zachycení událostí CSS animací v Javascriptu

Michael JavaScript, CSS

CSS animace dokázaly na mnoha místech nahradit Javascript, který byl dříve jedinou schůdnou možností. Nejen pro svou jednoduchost jsou stále populárnější. Jenže co, když chci reagovat na jejich průběh? Podívejme se, jak na to.

Kód CSS animace

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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Novinky z blogu

Vlastní eventy v Javascriptu

Eventy jsou s Javascriptem spjaty už od jeho počátků. Přesto, že jich v základu obsahuje nepřeberné množství, je někdy užitečné vytvořit si eventy vlastní. V tomto článku se...

Další články