elementUI transition-group

ElementUI 的 `transition-group` 是一个用于实现列表动画的组件，它可以在列表中添加、删除、更新元素时自动触发动画效果，提升用户交互体验。

使用 `transition-group` 组件时，需要在列表外层包裹一层 `<transition-group>` 元素，并指定 `name` 属性，该属性用于指定动画效果的名称。在列表中添加、删除、更新元素时，需要使用 `v-for` 指令循环渲染列表，并使用 `key` 属性来标识每个列表项，以便 `transition-group` 组件能够正确地识别每个元素的状态变化。

下面是一个使用 `transition-group` 实现列表动画的示例代码：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: "Item 1" },
        { id: 2, text: "Item 2" },
        { id: 3, text: "Item 3" },
      ],
    };
  },
  methods: {
    addItem() {
      const id = this.list.length + 1;
      const text = `Item ${id}`;
      this.list.push({ id, text });
    },
    removeItem() {
      this.list.pop();
    },
  },
};
</script>

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

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

在上面的代码中，我们使用 `transition-group` 组件包裹了一个列表，指定了 `name` 属性为 "list"。在列表中，我们使用 `v-for` 循环渲染了 `list` 数据源中的每个元素，并使用 `key` 属性标识每个元素。

在样式部分，我们定义了两个动画类名：`list-enter-active` 和 `list-leave-active`，用于指定动画过渡时间。同时，我们还定义了两个动画类名：`list-enter` 和 `list-leave-to`，分别用于指定元素进入和离开时的动画效果。