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

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

1 个答案: