Skip to main content

Animation

shadow

wje-animation is a simple wrapper for playing Animate.css animations over embedded content. It applies keyframes to the first element from the default slot and plays them through the Web Animations API.

Basic usage​

The sample below wraps wje-avatar in wje-animation and shows basic animation setup via the name attribute as well as programmatic control via play() and cancel().

What's worth thinking about​

  • The animation is applied to the first assigned element from the default slot, so insert one main wrapper into the component.
  • The default animation name is heartBeat.
  • The endDelay and iterationStart attributes are written in camelCase in the current implementation.
  • The component itself is not an interactive element; the host sets role="presentation".
  • The list of available animations is obtained via getAnimationsArray().

Accessibility​

  • Animation should support meaning, not replace it.
  • For important flows, think reduced motion.
  • If the animated content is interactive, accessibility is handled by the embedded element.
  • Use play() and cancel() for repeated triggering.
  • When changing the name on the fly, verify the refresh of the component in the specific use-case.
  • For longer or infinite animations, watch for interference and performance, especially in lists.

Attributes and properties​

delay​

PopisUrčuje oneskorenie pred spustením animácie.
Atribútdelay
Typnumber
Predvolené0

direction​

PopisUrčuje smer prehrávania animácie.
Atribútdirection
Typstring
Predvolenénormal

duration​

PopisUrčuje trvanie prehrávania animácie v milisekundách.
Atribútduration
Typnumber
Predvolené1000

easing​

PopisUrčuje easing funkciu použitú pri prehrávaní animácie.
Atribúteasing
Typstring
Predvolenélinear

endDelay​

PopisUrčuje oneskorenie po dohraní animácie.
AtribútendDelay
Typnumber
Predvolené0

fill​

PopisUrčuje fill mode použitý pri prehrávaní animácie.
Atribútfill
Typstring
Predvolenéauto

iterations​

PopisUrčuje počet opakovaní animácie.
Atribútiterations
Typstring｜number
Predvolené-

iterationStart​

PopisUrčuje počiatočný posun pre prvé opakovanie animácie.
AtribútiterationStart
Typnumber
Predvolené0

name​

PopisUrčuje názov animácie z knižnice Animate.css, ktorá sa prehrá nad vloženým elementom.
Atribútname
Typstring
PredvolenéheartBeat

Events​

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods​

getAnimationsArray​

PopisVráti zoznam animácií naparsovaných z knižnice Animate.css.
Signatúra() => Array

destroyAnimation​

PopisZruší aktuálne inicializovanú animáciu pred prípravou novej.
Signatúra() => void

play​

PopisSpustí alebo obnoví prehrávanie aktuálnej animácie.
Signatúra() => void

cancel​

PopisZruší aktuálnu animáciu a vráti jej prehrávanie do počiatočného stavu.
Signatúra() => void

CSS shadow parts​

Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.

CSS custom variables​

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots​

NázovPopis
defaultPredvolený slot pre hlavný obsah komponentu.

Content