Vue 中如何使用 transition-group 组件？

推荐答案

在 Vue 中使用 transition-group 组件时，通常用于对一组动态元素（如列表）进行过渡动画。以下是一个基本的使用示例：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
      ],
      nextId: 3,
    };
  },
  methods: {
    addItem() {
      this.items.push({ id: this.nextId++, text: `Item ${this.nextId}` });
    },
  },
};
</script>

<style>
.list-item {
  transition: all 1s;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

本题详细解读

1. transition-group 组件的作用

transition-group 组件用于对一组动态元素（如列表）进行过渡动画。与 transition 组件不同，transition-group 可以处理多个元素的进入、离开和移动的动画。

2. 关键属性

• name: 定义过渡类名的前缀。例如，name="list" 会生成 list-enter-active、list-leave-active 等类名。
• tag: 定义 transition-group 渲染的根元素标签。默认情况下，transition-group 会渲染为 <span>，但可以通过 tag 属性指定为其他标签，如 ul。

3. 过渡类名

• list-enter-active: 定义元素进入时的过渡效果。
• list-leave-active: 定义元素离开时的过渡效果。
• list-enter: 定义元素进入时的初始状态。
• list-leave-to: 定义元素离开时的最终状态。

4. 动态列表的过渡

在示例中，v-for 指令用于渲染动态列表，transition-group 会对列表中的每个元素应用过渡效果。当添加或删除列表项时，transition-group 会自动处理元素的进入和离开动画。

5. 样式控制

通过 CSS 控制过渡效果，如 transition: all 1s; 定义了所有属性的过渡时间为 1 秒。list-enter 和 list-leave-to 类名用于定义元素进入和离开时的初始和最终状态。

6. 注意事项

• 每个列表项必须有一个唯一的 key，以便 Vue 能够正确识别每个元素的变化。
• transition-group 会自动处理元素的移动动画，因此在列表项位置发生变化时，也会触发过渡效果。