Sådan anvendes nestede overgange i Vue

Animering af et element, når du viser eller gemmer det, er temmelig let i Vue - du skal bare indpakke elementet med -komponenten.

Men hvad med de tilfælde, hvor du vil vise eller skjule nestede børn i rækkefølge? For eksempel, når rodelementet er vist, skal du vise element A, og derefter vise element B, og så videre.

Dette er stadig en nem ting at gøre i Vue; du har bare brug for en måde at vide, hvornår den forrige overgang er udført for at starte den næste.

Hvis du ikke har gjort det før, og du spørger dig selv hvordan, vil jeg spare dig tid og vise dig, hvordan du gør det på en ren, kontrollerbar måde. Men inden det, kan du kigge på denne CodePen for at se, hvad vi vil bygge:

Som du kan se i demoen ovenfor, skal vi oprette en simpel modalboks, der vises i to trin (overgange). Først viser vi overlaybaggrunden, og derefter viser vi det hvide indholdsfelt.

Jeg vil dele oplæringen i tre sektioner. Først opretter vi knappen og modalboksen. Brugeren kan vise modalboksen ved at klikke på knappen og lukke den ved at klikke på overlaybaggrunden. I dette afsnit åbnes modalen uden animationer.

I det andet afsnit tilføjer vi en enkelt-trins overgang - så overlaybaggrunden og indholdsboksen vises samtidig.

Og i det sidste afsnit tilføjer vi en indlejret overgang til indholdsboksen - som vil blive vist, når overlay-baggrunden er overført.

Viser modalboksen uden animation

Lad os starte tingene hurtigt med Vue CLI 3's øjeblikkelige prototype. Så opret App.vue, og læg følgende i afsnittet