vue3 transitiongroup的使用

Vue3的`<transition-group>`组件可以让我们在多个元素之间添加过渡动画。它与Vue2的`<transition-group>`使用方式类似，不过在Vue3中使用需要注意一些细节。

下面是一个简单的例子，展示了如何使用`<transition-group>`：

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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);

    const addItem = () => {
      const id = items.value.length + 1;
      items.value.push({ id, name: `Item ${id}` });
    };

    return {
      items,
      addItem,
    };
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}

.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

在上面的例子中，我们使用了`<transition-group>`包裹了一个`<ul>`元素，然后使用`v-for`指令渲染了多个`<li>`元素。注意到每个`<li>`元素都有一个`key`属性，用来帮助Vue3识别哪些元素是已经存在的，哪些元素是新添加的或者被删除的。

我们还定义了一些CSS样式来定义动画效果。`.list-enter-active`和`.list-leave-active`样式分别用于在元素插入和删除时添加过渡效果，`.list-enter`和`.list-leave-to`样式则定义了具体的过渡效果。在这个例子中，我们定义了一个简单的淡入淡出和垂直平移的效果。

如果你想了解更多关于Vue3的`<transition-group>`组件的使用，请参考官方文档：[Transitions & Animations - Transitioning Between Elements](https://v3.vuejs.org/guide/transitions-overview.html#transitioning-between-elements)。