Renderovanje liste se veoma često koristi u programiranju, najčešće je to dinamičko prikazivanje listi kada se renderuje serija slično grupisanih informacija.
U ovom članku je objašnjeno kako animirati takve liste sa Vue.js frameworkom. Za animaciju više elemenata ne možemo koristiti komponentu “transition”, jer ona može da “obavije” SAMO JEDAN HTML element, stoga Vue.js uvodi novi tip wrapper komponente, pod nazivom
Pri tranziciji se promena svojstva na oba elementa dešava istovremeno. Usled čega su oba elementa vidljiva za vreme animacije (što nije baš najlepše). Novi element koji tek treba da se prikaže je uvek pozicioniran ispod elementa koji nestaje. Neprirodno je to što taj elemenat dolazi na pravo mesto tek kada prvi element skroz nestane tj. kada se završi animacija (pa se tada primeti skok elementa).
Da bi se izbeglo ovakvo ružno ponašanje potrebno je da elemenat koji nestaje potpuno završi animaciju, pre nego što počne animacija elementa koji se pojavljuje. Vue.js ovo postiže definisanjem tzv. moda tranzicije.
Postoje dve mogućnosti za vrednost atributa “mode”:
CSS Transitions (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu vrednosti izabranog CSS svojstva u određenom vremenskom periodu, tako što postepeno menja vrednosti CSS svojstva. Ovaj mehanizam pokrivaju četri svojstva: transition-property (obavezno), transition-duration (obavezno), transition-timing-function (opciono) i transition-delay (opciono).
Kako se izvodi animacija sa CSS-om Animacija pokretana iz CSS je nastala kao potreba front-end programera da imaju mogućnost definisanja ove interakcije bez upotrebe JavaScript-a ili eventualno zastarelog Flash-a. Dva glavna svojstva omogućavaju animaciju iz CSS-a: transition animation Svojstvo „transitions“ (srp. tranzicija) je najjednostavniji način animacije sa CSS-om. Tranzicija se koristi da ublaži naglu promenu … Read more
