Intro:
У меня есть приложение vue.js, которое содержит списки элементов (list1, list2).На смонтированном vue отображается только список 1.
Моя цель:
Когда пользователь нажимает на 1 элемент списка1, список1 исчезает (с переходами)и после завершения этих 1-ых переходов запускаются 2-ые переходы для появления списка 2
Что я пробовал?:
В этом компоненте vue вы можете видеть 4 элемента с переходами.
- Переходы 1 и 2 работают независимо друг от друга.
3 и 4 - это одинаковые переходы, НО они должны работать вместе только с одной кнопкой.3 перехода и после окончания начинаются 4 перехода.
<template>
<div>
<div style="height: 250px;">
<h3>TEST : transitions simple 1</h3>
<a href="#" class="myButton1" v-on:click="show1 = !show1">t1</a>
<a href="#" class="myButton1" v-on:click="show2 = !show2">t2</a>
<transition name="trans1">
<div
v-if="show1"
style="
width: 150px;
height: 150px;
background-color: red;
padding: 10px;
margin: 5px;
"
>
bonjour</div>
</transition>
<transition name="trans1">
<div
v-if="show2"
style="
width: 150px;
height: 150px;
background-color: blue;
padding: 10px;
margin: 5px;
"
>
en revoir!</div>
</transition>
</div>
<div style="height: 250px;">
<h3>TEST : transitions simple 2</h3>
<a href="#" class="myButton1" @click="trans1()">t1</a>
<a href="#" class="myButton1" @click="trans2()">t2</a>
<transition name="trans1">
<div
v-if="show3"
style="
width: 150px;
height: 150px;
background-color: red;
padding: 10px;
margin: 5px;
"
>
bonjour</div>
</transition>
<transition name="trans1">
<div
v-if="show4"
style="
width: 150px;
height: 150px;
background-color: blue;
padding: 10px;
margin: 5px;
"
>
en revoir!</div>
</transition>
</div>
<div>
<h3>TEST : transitions group</h3>
</div>
</div>
экспорт по умолчанию {имя: "Тест", данные: функция () {return {show1: false, show2: false, show3: false, show4: false,}}, methods:
{
trans1: function ()
{
this.show3 = true
},
trans2: function ()
{
this.show3 = false
setTimeout(function ()
{
this.show4 = true
console.log('toto1')
}, 3000)
}
}
}
@import "../styles/base.scss";
.trans1-enter-active
{
}
.trans1-enter
{
transform: translateX(100px);
}
.trans1-enter-to
{
transition: transform 1s ease-in-out;
}
.trans1-leave-active
{
}
.trans1-leave
{
}
.trans1-leave-to
{
transform: translateX(100px);
transition: all 1s ease-in-out;
}
Выпуск:
Варианты 1 и 2: хорошо работают. Варианты 3 и 4: 4 перехода никогда не хотят появляться (но 3 перехода исчезают правильно)