<transition-group>与Vue组件的配合及点击消失列表动画实现

嘿，我来帮你把<transition-group>的用法梳理清楚，还有你想要的点击消失列表动画的完整实现~

一、与Vue组件配合的核心要点 #

• 必须添加唯一key属性：不管是原生HTML元素还是自定义Vue组件，<transition-group>下的每个子项都需要唯一的key值——Vue靠它识别元素的添加、移除或移动，这是过渡动画生效的核心前提。
• 直接兼容自定义组件：你可以把自定义组件直接放在<transition-group>内部，只要给组件绑定唯一key就行，比如：

  <transition-group name="list-transition">
    <TodoItem 
      v-for="todo in todoList" 
      :key="todo.id" 
      :todo="todo"
      @delete="removeTodo(todo.id)"
    />
  </transition-group>
  

• 过渡类名规则：和单个元素的<transition>类似，类名会以你设置的name属性为前缀。比如name="testanim"对应testanim-enter-active、testanim-leave-to等类，用来定义动画的时长、曲线和状态变化。
• 支持移动过渡：如果你的列表有排序需求，还可以通过[name]-move类定义元素移动时的过渡动画，让列表排序更流畅。

二、实现点击消失的列表动画（完整可运行代码） #

你给出的代码已经有了基础框架，我把它补全成完整的Vue示例，包括脚本和完整的CSS样式：

模板部分 #

<transition-group name="testanim">
  <p key="1" v-if="open1" @click="open1 = false">Can You See Me?</p>
  <p key="2" v-if="open2" @click="open2 = false">Can You See Me?</p>
</transition-group>

样式部分 #

/* 定义进入和离开动画的过渡属性 */
.testanim-enter-active, .testanim-leave-active {
  transition: all 0.5s ease;
}

/* Vue3：进入动画的起始状态 & 离开动画的结束状态 */
.testanim-enter-from, .testanim-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

/* Vue2版本请替换上面的类为：
.testanim-enter, .testanim-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
*/

/* 可选：如果后续需要列表项移动动画，添加这个类 */
.testanim-move {
  transition: transform 0.5s ease;
}

脚本部分 #

// Vue3 Options API 示例
export default {
  data() {
    return {
      open1: true,
      open2: true
    }
  }
}

// 如果你用Vue3 Composition API：
// import { ref } from 'vue'
// export default {
//   setup() {
//     const open1 = ref(true)
//     const open2 = ref(true)
//     return { open1, open2 }
//   }
// }

代码说明 #

• 每个列表项的key必须唯一，这里用数字1和2是最简单的方式，实际项目中建议用数据的唯一标识（比如ID）。
• 点击段落时，对应的open变量切换为false，触发<transition-group>的离开动画，元素会按照CSS定义的样式逐渐消失。
• 动画效果是“向下平移20px+淡出”，你可以修改transform和opacity的值来调整成你想要的动画（比如缩放、向左平移等）。

内容的提问来源于stack exchange，提问作者HaveaLooker