为什么删除 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 class 而不是 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 没有工作的原因是...

Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.

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

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

Why it has not animation while removing div?

css-transitions

vue.js