Kako primijeniti ugniježđene prijelaze u Vue

Animacija elementa kada se prikazuje ili sakriva u Vueu je prilično jednostavna - jednostavno morate omotati element komponentom .

Ali što je s onim slučajevima kada želite pokazati ili sakriti ugniježđenu djecu uzastopno? Na primjer, nakon što se prikaže element root, pokažite element A, a nakon toga prikažite element B i tako dalje.

To je u Vueu još uvijek jednostavno; samo vam treba način da znate kada je prethodni prijelaz učinjen da biste započeli sljedeći.

Ako to već niste napravili, a pitate se kako, uštedjet ću vam vremena i pokazati vam kako to učiniti na čist, kontroliran način. Ali prije toga, pogledajte ovaj CodePen da vidite što ćemo graditi:

Kao što možete vidjeti u gornjem prikazu, stvorit ćemo jednostavan modalni okvir koji se prikazuje u dva koraka (prijelazi). Prvo prikazujemo pozadinu preklapanja, a zatim prikazujemo bijeli okvir sadržaja.

Razbiti ću udžbenik u tri odjeljka. Prvo ćemo stvoriti gumb i modalni okvir. Korisnik može prikazati modalni okvir klikom na gumb i zatvoriti ga klikom na pozadinu preklapanja. U ovom će se odjeljku modal otvoriti bez animacija.

U drugom odjeljku dodaćemo prijelaz u jednom koraku, pa će se pozadina preklapanja i okvir sa sadržajem istovremeno prikazati.

A u posljednjem dijelu za okvir sadržaja dodati ćemo ugniježđeni prijelaz - koji će se pokazati nakon završetka prijelaza pozadinskog sloja.

Prikazivanje modalnog okvira bez animacije

Krenimo stvari brzo s trenutnim prototipiranjem Vue CLI 3. Stoga stvorite App.vue i stavite sljedeće u odjeljak