Vue列表移动过渡仅在重新排序时有效，但不适用于拼接

<template>
  <div>
    <button @click="addItem">Add Item</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item.id" class="list-item">
        {{ item.text }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        // ...其他项
      ],
      nextItemId: 3 // 用于生成新项的唯一ID
    };
  },
  methods: {
    addItem() {
      this.items.push({
        id: this.nextItemId++,
        text: `Item ${this.nextItemId - 1}`
      });
    }
  }
};
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active in <2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>