<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

和 <Transition> 的区别

<TransitionGroup> 拥有 <Transition> 除了mode 以外全部的 props，包括 CSS 过渡 class 和 JavaScript 钩子监听器。

但有以下几点区别：

• 默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
• 过渡模式 mode在这里不可用，因为我们不再是在互斥的元素之间进行切换。
• 列表中的每个元素都必须有一个独一无二的 key attribute。
• CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

注意

当在 DOM 内模板中使用时，组件名需要写为 <transition-group>。

进入 / 离开动画

这里是 <TransitionGroup> 对一个 v-for 列表添加进入 / 离开动画的示例：

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </TransitionGroup>
</template>
<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

示例

对列表进行过渡渲染时，就必须使用 transition-group 元素包裹。点击列表中内容，按照以下动画移除，示例如下

<template>
  <div class="main_css">
    <transition-group name="slide">
      <li v-for="(item, i) in list" :key="item.id" @click="deleteDom(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "transitionGroupTest",
  data() {
    return {
      list: [
        {
          id: 1,
          name: "红烧鱼",
        },
        {
          id: 2,
          name: "炒土豆",
        },
        {
          id: 3,
          name: "烧茄子",
        },
      ],
    };
  },
  methods: {
    deleteDom(i) {
      this.list.splice(i, 1);
    },
  },
};
</script>
<style scoped>
.main_css {
  margin-left: 50px;
  margin-top: 50px;
}
.slide-enter-active {
  transition: all 0.5s linear;
}
.slide-leave-active {
  transition: all 0.1s linear;
}
.slide-enter {
  transform: translateX(-100%);
  opacity: 0;
}
.slide-leave-to {
  transform: translateX(110%);
  opacity: 0;
}
</>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24