transitiongroup

`<transition-group>` 是一个 Vue 组件，用于在元素列表在添加或删除时设置过渡效果。它可以包含多个元素，当有元素被添加或删除时，会触发过渡效果。常见的应用场景包括列表中的元素添加、删除、排序等操作时的动画效果。

`<transition-group>` 组件需要和 `<transition>` 或 `<animated>` 组件配合使用，来定义过渡的效果。在使用时，需要通过 `key` 属性来标记每个元素，以便 Vue 能够正确识别每个元素，并在过渡时应用相应的动画效果。

例如，以下代码展示了如何使用 `<transition-group>` 来实现一个列表的添加和删除时的过渡效果：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>

在上面的代码中，`<transition-group>` 组件的 `name` 属性指定了过渡效果的名称，`tag` 属性指定了包裹元素的标签名，`v-for` 指令用于循环渲染列表中的元素，`key` 属性用于标记每个元素。

同时，还需要在 CSS 中定义过渡效果的样式：

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

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

在上面的代码中，`.list-enter-active` 和 `.list-leave-active` 类用于定义过渡时的动画效果，`.list-enter` 和 `.list-leave-to` 类用于定义进入和离开时的初始和最终状态。这里定义了一个简单的动画效果，当元素进入时从下方滑入，离开时则向上方滑出。