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

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=".5.17/vue.js"></script><script src=".min.js"></script>
<link href=".min.css" rel="stylesheet"/>
<link href=".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>

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./ajax/libs/vue/2.5.17/vue.js"></script><script src="https://unpkg./vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr/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

• javascript
• vue.js
• transition
• vuetify.js
• animate.css

Share Improve this question Follow edited Aug 11, 2019 at 22:15 km2442 asked Aug 11, 2019 at 22:10 km2442km2442 82733 gold badges1313 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 ing 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./ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg./vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr/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>

You should use a <transition-group>, when iterating with a v-for loop.

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"> 
</script><script src="https://unpkg./vuetify/dist/vuetify.min.js"></script>
<link href="https://unpkg./vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr/npm/animate.css" rel="stylesheet"/>

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

Documentation: https://v2.vuejs/v2/guide/transitions.html#List-Transitions