0

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

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

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

4

1 回答 1

1

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

如果您参考 Vue 文档中给出的示例，您可以看到需要进入/离开转换类来将所有内容组合在一起。例如，您可以将其添加到您的 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>

于 2021-10-01T22:57:02.410 回答