为什么 VueJS 移动动画只在一个方向上起作用？答案

【问题标题】：Why do VueJS move animations only work in one direction?为什么 VueJS 移动动画只在一个方向上起作用？
【发布时间】：2021-11-22 16:10:16
【问题描述】：

我完全被这个难住了。出于某种原因，Vue3 将正确地为包含项目列表的<transition-group/> 应用移动动画类，但仅如果列表向前推进。我为此编写了一个 CodePen，即使有一个非常简单的用例（列出数字），如果您向除向后之外的任何方向前进，转换类也不会被应用。

https://codepen.io/monitorjbl/pen/vYZPzXO

如果您单击“-”按钮，将应用动画类并且您可以看到移动动画触发。但是，单击“+”按钮会导致没有应用移动动画类，也没有任何动画。

【问题讨论】：

见文档vuejs.org/v2/guide/…
我已经通读了几遍，所以我肯定有可能遗漏了一些东西，但我不知道是什么。有什么提示吗？
您缺少进入和离开 CSS 类。
@Terry 我在询问移动动画，所以我不确定进入和离开 CSS 类需要什么。移动动画在一个方向而不是另一个方向上工作，是否有某种默认的进入/离开类可以解释这一点？
你只是在移动中间的元素。根据移动的方向，第一个和最后一个元素被销毁或重新渲染。您可以看到它们被删除或添加到 DOM，尤其是在您使用较慢的过渡持续时间时。

标签： javascript vue.js vuejs3 vuejs-transition vuejs-transition-group

【解决方案1】：

正如我在您的 cmets 中提到的，您缺少进入和离开转换类。由于您在任何时候都只更改数组的 3 个元素，这意味着 2 个元素将保留在列表中并与您的“移动”类匹配，但是这 3 个元素将被创建/销毁并且您不处理这些情况。

如果您refer to the example given in the Vue documentation，您可以看到需要进入/离开转换类才能将所有内容组合在一起。例如，您可以将其添加到您的 CSS：

.flip-list-enter-from,
.flip-list-leave-to {
  opacity: 0;
}

.flip-list-leave-active {
  position: absolute;
}

这是一个概念验证示例：

const Demo = {
  data() {
    return {
      min: 1,
      max: 5,
      list: []
    };
  },
  mounted() {
    this.populateList();
  },
  methods: {
    shiftDown() {
      this.min -= 3;
      this.max -= 3;
      this.populateList();
    },
    shiftUp() {
      this.min += 3;
      this.max += 3;
      this.populateList();
    },
    populateList() {
      this.list = [];
      for (let i = this.min; i <= this.max; i++) {
        this.list.push(i);
      }
    }
  }
};

Vue.createApp(Demo).mount("#flip-list-demo");

body {
  margin: 30px;
}

.flip-list-item {
  transition: all 0.8s ease;
}

.flip-list-enter-from,
.flip-list-leave-to {
  opacity: 0;
}

.flip-list-leave-active {
  position: absolute;
}

<script src="https://unpkg.com/vue@next"></script>
<div id="flip-list-demo">
  <button @click="shiftDown" style="background-color:cyan">-</button>
  <button @click="shiftUp" style="background-color:yellow">+</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in list" :key="item" class="flip-list-item">
      {{ item }}
    </li>
  </transition-group>
</div>

【讨论】：