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

Question

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

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

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

Answer 1

正如我在您的评论中提到的，您缺少进入和离开过渡 classes。由于您随时只更改数组的 3 个元素，这意味着 2 个元素将保留在列表中并将匹配您的“移动”class，但 3 个元素将是 created/destroyed 而您不处理这些案件。

如果您 refer to the example given in the Vue documentation，您会发现 enter/leave 转换 class 需要将所有内容组合在一起。例如，您可以将此添加到您的 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>

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

Why do VueJS move animations only work in one direction?

javascript

vue.js

vuejs3

vuejs-transition

vuejs-transition-group