Tranzicija pri zameni elemenata različitog tipa
Tranzicija koja se dešava pri zameni dva elementa različitog tipa je veoma jedanostavna, dovoljno je da se oba elementa obaviju sa transition elementom.
Primer
See the Pen Osnovna tranzicija izmedju elemenata by Web programiranje (@chos) on CodePen.
Transition Modes
Pri tranziciji u prethodnom primeru 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”:
- out-in – trenutno vidljivi element prvi izvodi animaciju, pa tek po završetku te animacije započinje animacija novog elementa. Ovaj mod se koristi u većini slučajeva!
- in-out – Prvo animaciju izvodi novi element, pa tek po završetku te animacije započinje animacija postojećeg elementa.
Stoga je dovoljno definisati vrednost atributa mode sa jednom od dve ponudjene vrednosti.
Primer
U ovome primeru je transiton elementu dodat atribut mode="out-in"
See the Pen Mod tranzicije izmedju elemenata by Web programiranje (@chos) on CodePen.
Tranzicija pri zameni elemenata istog tipa
Ukoliko se smenjuju dva elementa različitog tip (npr. “p” i “div”) tranzicija će se izvršiti, medjutim ako se smenjuju elementi istog tipa potrebno je dodati atribut “key” sa različitim vrednostima za svaki element da bi ih Vue.js razlikovao!
|
1 2 3 4 5 6 7 8 |
<transition> <button v-if="isEditing" key="save"> Sačuvaj </button> <button v-else key="edit"> Edituj </button> </transition> |
Zbog ovoga možemo izbaciti v-if i uraditi tranziciju izmedju dva stanja atributa “key”:
|
1 2 3 4 5 |
<transition> <button v-bind:key="isEditing"> {{ isEditing ? 'Sačuvaj' : 'Edituj' }} </button> </transition> |
Tranzicija izmedju komponenti
Tranzicija izmedju komponenti je čak jednostavnija od obične tranzicije izmedju istih elemenata jer ne zahteva atribut “key”:
HTML
|
1 2 3 |
<transition name="component-fade" mode="out-in"> <component v-bind:is="view"></component> </transition> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
new Vue({ el: '#transition-components-demo', data: { view: 'v-a' }, components: { 'v-a': { template: '<div>Component A</div>'`` }, 'v-b': { template: '<div>Component B</div>' } } }) |