Aplicació de transicions imbricades a Vue

Animar un element a mesura que s’esvaeix o s’esvaeix és força fàcil a Vue; tot el que heu de fer és trencar l’element amb el component .

Però, què passa amb aquells casos en què voleu mostrar o amagar nens niats un per un? Per exemple, després de mostrar l'element arrel, mostrar l'element A, després mostrar l'element B, etc.

Això encara és fàcil de fer a Vue. Només cal saber quan s’ha completat la transició anterior per iniciar la següent.

Si no ho heu fet abans i us pregunteu com fer-ho, us estalviaré temps i us mostraré com fer-ho de manera neta i controlable. Abans, però, mireu aquest CodePen per veure què construirem:

Com podeu veure a la demostració anterior, crearem un quadre modal senzill que apareixerà en dos passos (transicions). Primer mostrem el fons de superposició i després el quadre de contingut blanc.

Dividiré el tutorial en tres seccions. Primer creem el botó i el quadre modal. L'usuari pot veure el quadre modal fent clic al botó i tancar-lo fent clic al fons de superposició. En aquesta secció s'obre el modal sense animacions.

A la segona secció, afegirem una transició d'un pas perquè el fons de superposició i el quadre de contingut apareguin alhora.

A la secció final, afegirem una transició imbricada per al quadre de contingut que apareixerà en segon pla un cop finalitzada la transició de superposició.

Mostra el quadre modal sense animació

Comencem per prototipar Vue CLI 3. De seguida, creeu App.vue i afegiu el següent a la secció un: