Uvod

vue animacija

Vue.js ima mehanizme za jednostavno integrisanje CSS animacije nad HTML elementom. Vue.js omogućava CSS animaciju tako što automatski dodaje specifične klase HTML elementu u odredjenem trenutku animacije, nakon čega možemo preko njih da se definišemo CSS svojstva za animaciju.
Pored toga Vue.js omogućava animaciju sa JavaScript-om jer sa “transition hooks” (“custom events” koje “okida” Vue.js prema utvrdjenom tajmingu animacije) omogućava korišćenje JavaScript-a za direktnu manipulaciju DOM-om.
Takodje uz Vue.js postoji mogućnost da se jednostavno integrišu 3rd-party CSS biblioteke za animaciju (npr. Animate.css) ili 3rd-party JavaScript biblioteke za animaciju (npr. Velocity.js ili GreenSock).

Vue.js & CSS animacija

Da bi sa Vue.js kontrolisali animaciju (bilo CSS-om ili JavaScript-om) potrebno je da “obajvijemo” HTML elementat sa <transition> elementom kome definišemo atribut name radi targetiranja samog elementa.

NAPOMENA:
U okviru transition wrapper tag-a može biti SAMO JEDAN HTML element, ustvari može biti više elemenata ali je samo jedan može biti prikazan u jednom trentku (pri korišćenju v-if ili v-show).

Nakon implementacije “transition” elementa kao wrapper-a, Vue.js će automatski proveravati da li je na elementu primenjena CSS svojstva “transition” ili “animation”, a ako ih pronadje onda Vue.js dodaje a zatim i uklanja njegove specifične CSS klase u odgovarajućim vremenskom tajmingu. Animacija je podeljena na dva dela: “enter” i “leave”. Deo “enter” se dešava kada se komponenta prikazuje, dok deo “leave” predstavlja animaciju kada se element uklanja. Svaki od delova ima po tri klase tako da Vue.js tokom svake CSS animacije dodaje/uklanja sledećih 6 klasa. Svaka od klasa dobija prefiks prema nazivu tranzicije (name=”nazivElementaTranzicije”):

  1. imeElementaTranzicije-enter
    Ovo je početno stanje za unos CSS klasa se dodaje pre nego što je element umetnut. Ova klasa nestaje nakon prvog frame-a animacije.
  2. imeElementaTranzicije-enter-active
    Ova klasa se primenjuje se tokom cele faze ulaska (klasa se dodaje pre nego što je element umetnut, a uklanja kada se završi tranzicija / animacija). Ova klasa se koristiti za definisanje trajanja, funkcije animacije i odlaganja animacije.
  3. imeElementaTranzicije-enter-to
    Ova klasa se dodaje jedan frame nakon što je element umetnut (odmah nakon što je klasa “imeElementaTranzicije-enter” uklonjena), a uklanja se po završtetku animacije.

  4. imeElementaTranzicije-leave
    Ova klasa se dodaje kad se aktivira animacija, a uklanja se nakon prvog frame-a.
  5. imeElementaTranzicije-leave-active
    Ova klasa se primenjuje tokom čitave faze “leave”. Dodaje se odmah po aktiviranju animacije, a uklanja se nakon završetka animacije. U ovoj klasi se vrši definisanje vremenskog trajanja, funkcije animacije i odlaganja animacije.
  6. imeElementaTranzicije-leave-to

    Ova klasa se dodaje jedan frame nakon što je element umetnut (odmah nakon što je klasa “imeElementaTranzicije-leave” uklonjena), a uklanja se po završtetku animacije.

klase za tranziciju vue.js

Zaključak:

…-enter bi trebao da sadrži startni stajling elementa koji počinje da se pojavljuje
…-leave bi trebao da sadrži startni stajling elementa koji počinje da nestaje


…-enter-active & …-leave-active se koristi da definiše svojstva animacije (transition/animation)


…-enter-to bi trebao da sadrži krajnji stajling elementa koji se pojavio
…-leave-to bi trebao da sadrži krajnji stajling elementa koji je nestao

Primer

U ovome primeru se nakon klika izvršava postepeno nestajanje/pojavljivanje teksta koristeći tranziciju transition: opacity 5s;

See the Pen Vue basic animation by Web programiranje (@chos) on CodePen.

Ono što je bitno za shvatanje animacije sa Vue.js, je ubacivanje a zatim i izbacivanje specifičnih klasa prema odgovarajućem tajmingu.

vue animacija dodavanje klasa

CSS svojstva “transition” i “animation” na istom elementu

Ukoliko iz nekog razloga na jednom elementu primenjena zajedno svojstva “transition” i “animation” (npr. CSS animaciju pokreće Vue.js, a hover efekat 3rd party biblioteka), i ta svojstva imaju različite dužine trajanja, potrebno je definisati glavno svojstvo (čija dužina trajanja se primenjuje). Ovo se postiže dodavanjem atributa “type”. Vrednost atributa “type” definiše koje CSS svojstvo je glavno (type=”animation” ili type=”transition”).

NAPOMENA:
Jedina razlika izmedju CSS svojstava “transition” i “animation” je što se klasa “…-enter” ne uklanja odmah nakon umetanja elemenata, već nakon što se završi animacija (kada se “okine” događaj “animationend”).

Inicijalna animacija pri učitavanju

Ukoliko želimo da se animacija izvede odmah pri učitavanju strane, potrebno je da se transition elementu doda atribut “appear”:

Primer

U ovome primeru se aktivira animacija odmah po učitavanju:

See the Pen Inicijalna tranzicija by Web programiranje (@chos) on CodePen.

Vue.js & JavaScript animacija

Za animaciju sa JavaScript-om su obezbedjene udice (eng. “hooks”) na koje možemo da se nakačimo:

  • before-enter
  • enter
  • after-enter
  • enter-cancelled
  • before-leave
  • leave
  • after-leave
  • leave-cancelled

Ove tzv. udice su ustvari “custom events” koje “okida” Vue.js element <transition></transition> prema utvrdjenom tajmingu vezanom za animacije. Po “okidanju” odgovarajućih dogadjaja se mogu pozvati pripremljene metode. Ove metode mogu se koristiti samostalno ili u saradnji sa CSS svojstvima transitions/animations:

HTML

JavaScript

NAPOMENA:
Calback funkcija “done()” je obavezna u slučaju da koristimo samo JavaScript bez CSS-a (ovo je bitno jer tada Vue.js ne zna kada je gotova animacija). Takodje je poželjno dodati v-bind:css=”false” čime govorimo Vue.js da nema CSS tranzicije i da ne troši vreme i resurse proveravajući.
U slučaju da se pored animacije sa JavaScript-om koristi i animacija sa CSS-om onda nije potrebna callback funkcija “done()” jer onda Vue.js zna kada je gotova animacija.

Primer

U ovome primeru je obradjena animacija samo sa JavaScript-om, bez CSS-a (treba napomenuti da ovo baš i nije praksa, jer se najčešće koristi kombinacija JavaScript i CSS animacije).

See the Pen Animacija samo sa JavaScript-om by Web programiranje (@chos) on CodePen.


Vue.jd & 3rd party bibilioteke za animaciju

Vue.js trasition sistem nudi mnogo jednostavnih načina za animiranje pojavljivanja (enter) i nestajanja (leaving) elemenata, medjutim Vue.js može da animira i brojeve i sve što može biti konvertovano u brojeve stim što je za to neophodna pomoć 3rd party biblioteka (npr. GSAP, Velocity.js…) .

Tako koristeći GSAP-ovu “TweenLite” biblioteku možemo da primenimo “easing” funkcije pri promeni stanja neke promenjive, a Vue.js će nam omogućiti brzu reaktivnost i primeniti je na DOM.

Primer

U ovome primeru watcher nam omogućava da u saradnji sa GSAP-ovim “TweenLite” animiramo promene bilo kog stanja numeričke promenjive.

See the Pen Animacija brojeva sa GSAP by Web programiranje (@chos) on CodePen.

Primer

U ovome primeru koristim jednostavnu animaciju koja podrazumeva translaciju elementa duž “x” ose iz početne pozicije udaljenu 280px od predefinisanog krajenjeg položaja. Za easy funkciju se koristi tip pod nazivom “bounce”.

See the Pen Animacija samo sa GSAP by Web programiranje (@chos) on CodePen.

NAPOMENA:
GSAP biblioteka nam omogućava da pozovemo callback funkciju u odgovarajućem trenutku animacije:
“onComplete”, “onUpdate”, “onStart” i “onRepeat”.

Primer

U ovome primeru se koristi GSAP metoda “staggerFrom” koja nam omogućava jednostavno definisanje animacije za više elemenata sa odgovarajućim odlaganjem (eng. delay) animacije za svaki element u kontejneru ponaosob.

See the Pen Vuejs and GSAP stagger by Web programiranje (@chos) on CodePen.

Podelite:

Ostavite komentar