Cara Memohon Peralihan Tersarang di Vue

Menggambar unsur apabila menunjukkan atau bersembunyi adalah sangat mudah di Vue - anda hanya perlu membungkus elemen dengan komponen .

Tetapi bagaimana dengan kes-kes tersebut apabila anda ingin menunjukkan atau menyembunyikan kanak-kanak bersarang secara berurutan? Sebagai contoh, selepas elemen akar ditunjukkan, tunjukkan elemen A, dan selepas itu, tunjukkan elemen B, dan sebagainya.

Ini masih mudah dilakukan di Vue; anda hanya memerlukan satu cara untuk mengetahui apabila peralihan sebelumnya dilakukan untuk memulakan yang seterusnya.

Jika anda tidak melakukannya sebelum ini, dan anda tertanya-tanya bagaimana, saya akan menjimatkan masa anda dan menunjukkan kepada anda cara melakukannya dengan cara yang bersih dan terkawal. Tetapi sebelum itu, perhatikan CodePen ini untuk melihat apa yang akan kita bina:

Seperti yang anda dapat lihat dalam demo di atas, kami akan membuat kotak modal mudah yang dipaparkan dalam dua langkah (peralihan). Pertama, kami menunjukkan latar belakang tindanan, dan kemudian kami menunjukkan kotak kandungan putih.

Saya akan memecahkan tutorialnya ke dalam tiga bahagian. Pertama, kami akan membuat butang dan kotak modal. Pengguna boleh menunjukkan kotak modal dengan mengklik pada butang dan menutupnya dengan mengklik pada latar belakang tindanan. Dalam bahagian ini, modal akan dibuka tanpa animasi.

Dalam bahagian kedua, kami akan menambah peralihan satu langkah - jadi latar belakang tindanan dan kotak kandungan akan ditunjukkan serentak.

Dan dalam bahagian akhir, kami akan menambah peralihan bersarang untuk kotak kandungan - yang akan ditunjukkan selepas peralihan latar belakang tindanan selesai.

Menunjukkan kotak modal tanpa animasi

Mari mulakan dengan cepat dengan prototaip segera Vue CLI 3. Jadi buat App.vue, dan masukkan yang berikut ke dalam bahagian