Vue iç içə keçidlərin tətbiqi

Bir elementi sola-çıxa canlandırmaq Vue-də olduqca asandır - təkcə elementi komponenti ilə qırmaqdır.

Bəs yuvalı uşaqları bir-bir göstərmək və ya gizlətmək istədiyiniz hallar? Məsələn, kök elementini göstərdikdən sonra A elementini, sonra B elementini və s.

Vue'da bunu etmək hələ asan bir şeydir. Növbəti işə başlamaq üçün əvvəlki keçidin nə zaman başa çatdığını bilməlisiniz.

Əvvəllər etməmisinizsə və necə edəcəyinizi düşünürsünüzsə, vaxtınıza qənaət edəcəm və bunu təmiz və idarəolunan bir şəkildə göstərəcəyəm. Ancaq bundan əvvəl nə quracağımıza baxmaq üçün bu CodePen-ə baxın:

Yuxarıdakı demoda gördüyünüz kimi, iki mərhələdə (keçidlərdə) görünəcək sadə bir modal qutu yaradacağıq. Əvvəlcə örtük arxa planını, sonra isə ağ rəngli qutunu göstəririk.

Dərsliyi üç hissəyə ayıracağam. Əvvəlcə düyməni və modal qutunu yaradırıq. İstifadəçi düyməni basaraq modal qutusuna baxa və üst üstə arxa plana vuraraq bağlaya bilər. Bu hissədə modal animasiyalar olmadan açılır.

İkinci hissədə üst-üstə düşən arxa plan və məzmun qutusu eyni zamanda görünməsi üçün bir addımlıq keçid əlavə edəcəyik.

Son hissədə, üst üstə keçid başa çatdıqdan sonra arxa planda görünəcək məzmun qutusu üçün iç içə keçid əlavə edəcəyik.

Animasiya olmadan mod qutusunu göstərin

Dərhal Vue CLI 3 prototipini düzəltməyə başlayaq, belə ki App.vue yaradın və bölməyə aşağıdakıları əlavə edin bir: