shadow
wje-animation je jednoduchý obal pre prehrávanie Animate.css animácií nad vloženým obsahom. Keyframy aplikuje na prvý element z predvoleného slotu a prehrá ich cez Web Animations API.
Ukážka nižšie obalí wje-avatar do wje-animation a ukazuje základné nastavenie animácie cez atribút name aj programové ovládanie cez play() a cancel().
- Animácia sa aplikuje na prvý priradený element z predvoleného slotu, preto do komponentu vkladajte jeden hlavný wrapper.
- Predvolený názov animácie je
heartBeat.
- Atribúty
endDelay a iterationStart sa v aktuálnej implementácii zapisujú v camelCase.
- Komponent sám nie je interaktívny prvok; host nastavuje
role="presentation".
- Zoznam dostupných animácií získate cez
getAnimationsArray().
- Animácia má podporovať význam, nie ho nahrádzať.
- Pri dôležitých tokoch myslite na reduced motion.
- Ak je animovaný obsah interaktívny, prístupnosť rieši vložený element.
Odporúčané postupy
- Pre opakované spúšťanie používajte
play() a cancel().
- Pri zmene
name za behu si overte refresh komponentu v konkrétnom use-case.
- Pri dlhších alebo nekonečných animáciách sledujte rušivosť a výkon, najmä v zoznamoch.
| Popis | Určuje oneskorenie pred spustením animácie. |
| Atribút | delay |
| Typ | number |
| Predvolené | 0 |
| Popis | Určuje smer prehrávania animácie. |
| Atribút | direction |
| Typ | string |
| Predvolené | normal |
| Popis | Určuje trvanie prehrávania animácie v milisekundách. |
| Atribút | duration |
| Typ | number |
| Predvolené | 1000 |
| Popis | Určuje easing funkciu použitú pri prehrávaní animácie. |
| Atribút | easing |
| Typ | string |
| Predvolené | linear |
| Popis | Určuje oneskorenie po dohraní animácie. |
| Atribút | endDelay |
| Typ | number |
| Predvolené | 0 |
| Popis | Určuje fill mode použitý pri prehrávaní animácie. |
| Atribút | fill |
| Typ | string |
| Predvolené | auto |
| Popis | Určuje počet opakovaní animácie. |
| Atribút | iterations |
| Typ | string｜number |
| Predvolené | - |
| Popis | Určuje počiatočný posun pre prvé opakovanie animácie. |
| Atribút | iterationStart |
| Typ | number |
| Predvolené | 0 |
| Popis | Určuje názov animácie z knižnice Animate.css, ktorá sa prehrá nad vloženým elementom. |
| Atribút | name |
| Typ | string |
| Predvolené | heartBeat |
Pre tento komponent nie sú dostupné žiadne udalosti.
| Popis | Vráti zoznam animácií naparsovaných z knižnice Animate.css. |
| Signatúra | () => Array |
| Popis | Zruší aktuálne inicializovanú animáciu pred prípravou novej. |
| Signatúra | () => void |
| Popis | Spustí alebo obnoví prehrávanie aktuálnej animácie. |
| Signatúra | () => void |
| Popis | Zruší aktuálnu animáciu a vráti jej prehrávanie do počiatočného stavu. |
| Signatúra | () => void |
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
| Názov | Popis |
|---|
default | Predvolený slot pre hlavný obsah komponentu. |