为什么删除div时没有动画？

Question

在我的项目中，我使用 vue.js 2.9。 我已经定义了移动和移除的动画（过渡和翻译）：

transform: translate3d(0, 0, 0)
&.move-enter-active, &.move-leave-active
  transition: all 0.2s linear
&.move-enter, &.move-leave
  transform: translate3d(100%, 0, 0)

我的模板 div 是：

<template>
  <transition name="move">
    <div v-show="showFlag" class="food" ref="food">
      <div class="food-content"></div>
    </div>
  </transition>
<template>

我试过了：

&.move-enter, &.move-leave-to
  transform: translated3d(100%, 0, 0)

和

&.move-enter, &.move-leave-active
  transform: translated3d(100%, 0, 0)

还可以。 "&.move-leave-to" 很容易理解。

但是“&.move-leave-active”让我很困惑。

谁能帮帮我？

Answer 1

您需要使用v-leave-to 类而不是v-leave 来设置离开转换的final 状态。

new Vue({
  el: '#app',
  data: {
    showFlag: true
  }
})

.food {
  transform: translate3d(0, 0, 0);
}
.food.move-enter-active, .food.move-leave-active {
  transition: all 0.2s linear;
}
.food.move-enter, .food.move-leave-to {
  transform: translate3d(100%, 0, 0);
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <transition name="move">
    <div v-show="showFlag" class="food" ref="food">
      <div class="food-content">Food content</div>
    </div>
  </transition>
  <p><button @click="showFlag = !showFlag">Toggle</button></p>
</div>

v-leave 不起作用的原因是...

请假的开始状态。触发离开过渡时立即添加，在一帧后删除。

见https://vuejs.org/v2/guide/transitions.html#Transition-Classes