Vue 过渡模式在与 v-for 和 v-if 结合使用时不起作用

Question

在带有 Vuetify 的 Vue 中，我想用 animate.css 动态更改 v-cards，我遇到了一个问题。 out-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

怎么了？

您的转换在一个循环中，这意味着在渲染之后您将拥有多个彼此无关的transitions（mode 不起作用）...这就是您的模板在渲染后的样子：

<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>

所以当你按下下一步时，你会从一个过渡跳到另一个......在这种情况下，mode 丢失了。

我如何解决这个问题？

我们只需要将整个项目包装在一个转换中，因此在这种情况下，只有一个 transition 会检测一个元素何时退出以及一个新元素何时进入（mode 将起作用）：

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>

Answer 2

在使用v-for 循环进行迭代时，您应该使用<transition-group>。

<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-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>

文档：https://vuejs.org/v2/guide/transitions.html#List-Transitions