When using Vue with Vuetify, I am trying to dynamically change v-cards with the help of animate.css. However, I have run into an issue. The out-in mode is not working in this scenario as both fade-in and fade-out animations occur simultaneously. Is there a way to ensure that the fade-in animation starts only after the fade-out animation has ended?
new Vue({
el: '#app',
data() {
return {
number: 1,
items: [
{
text: "a",
number: 1
},
{
text: "b",
number: 2
},
{
text: "c",
number: 3
},
]
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/animate.css" rel="stylesheet"/>
<div id="app">
<div v-for="(item, index) in items" :key="index">
<transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
<v-card dark class="ma-3" v-if="number === item.number">
<p>{{item.text}}</p>
</v-card>
</transition>
</div>
<br>
<v-btn @click="number++; if(number === 4) number = 1;">Next</v-btn>
</div>