Vue transition mode don't work when combined with v-for and v-if

Question

in Vue with Vuetify, I want to change dynamically v-cards with animate.css, and I'm facing a problem. The out-in mode doesn't want to work in this situation. Fade-in and fade-out animations are moving at the same time. How can force it to start the fade-in animation after ending a fade-in?

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>

https://codepen.io/km2442/pen/zgmmwz

Answer 1

What is wrong ?

Your transition is inside a loop which means after the rendering you will have multiple transitions that have no relation to each other (mode doesn't work)... this is how your template will look like after rendering :

<div key="0">
    <transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
      <v-card dark class="ma-3" v-if="true">
        <p>a</p>
      </v-card>
    </transition>
 </div>
 <div key="1">
    <transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
     <!-- <v-card dark class="ma-3" v-if="false">
        <p>b</p>
      </v-card> -->
    </transition>
 </div>
 <div key="2">
    <transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
      <!-- <v-card dark class="ma-3" v-if="false">
        <p>c</p>
      </v-card> --> 
    </transition>
 </div>
 <div key="3">
    <transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
      <!-- <v-card dark class="ma-3" v-if="false">
        <p>d</p>
      </v-card> -->
    </transition>
 </div>

so when you press next you are jumping from a transition to another one ...and in this case the mode is lost .

How i fix this ?

we just need to wrap our whole items inside a transition, so in this case there is only one transition that will detect when an element is going out and a new one is coming in (mode will work) :

Vue.config.devtools = false;
Vue.config.productionTip = false;

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">
  <transition mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="animated slideOutRight">
    <template v-for="(item, index) in items">
      <v-card dark class="ma-3" v-if="number === item.number" :key="index">
        <p>{{item.text}}</p>
      </v-card>
  </template>
  </transition>
  <br>
  <v-btn @click="number++; if(number === 4) number = 1;">Next</v-btn>
</div>