Kuinka soveltaa sisäkkäisiä siirtymiä tyyliin

Elementin animoiminen sen näyttämisen tai piilottamisen suhteen on melko helppoa Vuessa - sinun täytyy vain kääriä elementti -komponentilla.

Entä ne tapaukset, joissa haluat näyttää tai piilottaa sisäkkäisiä lapsia peräkkäin? Esimerkiksi sen jälkeen, kun juurielementti on näytetty, näytä elementti A ja sen jälkeen elementti B ja niin edelleen.

Tämä on edelleen helppo tehdä Vuessa; Tarvitset vain tavan tietää, milloin edellinen siirtymä on tehty aloittaaksesi seuraava.

Jos et ole vielä tehnyt sitä aiemmin ja mietit miten, säästän sinulle aikaa ja näytän sinulle, kuinka se tehdään puhtaalla, hallittavalla tavalla. Mutta ennen sitä katsomme tätä CodePen-ohjelmaa nähdäksesi mitä aiomme rakentaa:

Kuten yllä olevasta esittelystä näet, aiomme luoda yksinkertaisen modaalikehyksen, joka näytetään kahdessa vaiheessa (siirtymät). Ensin näytämme peittokuvan taustan ja sitten valkoisen sisältöruudun.

Jaotan opetusohjelman kolmeen osaan. Ensin luomme painikkeen ja modaalipaketin. Käyttäjä voi näyttää modaalikentän napsauttamalla painiketta ja sulkea sen napsauttamalla peittokuvan taustaa. Tässä osassa modaali avautuu ilman animaatioita.

Toiseen osaan lisäämme yksivaiheisen siirtymisen - joten peittokuvatausta ja sisältöruutu näytetään samanaikaisesti.

Ja viimeiseen osaan lisäämme sisäkkäissiirtymän sisältöruutuun - joka näkyy, kun peittokuvan taustamuutos on valmis.

Näytetään modaalinen laatikko ilman animaatiota

Aloitetaan asiat nopeasti Vue CLI 3: n välittömällä prototyypillä. Joten luo App.vue ja laita seuraava