Vue学习之路-内部组件TransitionGroup

Vue中的<TransitionGroup>是一个用于为列表元素添加动画效果的内置组件，特别适用于v-for渲染的动态列表。以下是对其核心特性和用法的详细解析：

核心特性

与<Transition>的区别
容器元素：默认不渲染额外容器，但可通过tag属性指定（如tag="ul"）。
过渡模式：不支持mode属性（因列表元素非互斥切换）。
唯一Key：每个列表项必须设置key，确保动画正确追踪元素变化。
CSS作用域：过渡类名（如.list-enter-active）直接应用于列表项，而非容器。
动画类型支持
进入/离开动画：通过CSS类名（如*-enter-from、*-leave-to）控制元素插入和移除时的过渡效果。
移动动画：需额外CSS（如.list-move）处理元素顺序变化时的平滑移动。
渐进延迟动画：结合JavaScript钩子和data-*属性实现序列化动画（如示例中的GSAP库）。

代码示例与关键点1. 基础进入/离开动画<TransitionGroup name="list" tag="ul"> <li v-for="item in items" :key="item">{{ item }}</li></TransitionGroup><style>.list-enter-active, .list-leave-active { transition: all 0.5s ease;}.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(30px);}</style>

关键点：
name="list"对应CSS类名前缀（如.list-enter-active）。
离开元素需设置position: absolute避免布局抖动（需父容器有定位上下文）。

2. 移动动画优化.list-move { transition: transform 0.5s ease;}.list-leave-active { position: absolute; /* 移除元素不影响其他项位置 */}

关键点：
.list-move确保元素顺序变化时平滑过渡。
绝对定位的离开元素需配合父容器的position: relative。

3. 渐进延迟动画（JavaScript钩子）<TransitionGroup tag="ul" :css="false" @before-enter="onBeforeEnter" @enter="onEnter"> <li v-for="(item, index) in list" :key="item" :data-index="index"> {{ item }} </li></TransitionGroup><script>methods: { onEnter(el, done) { gsap.to(el, { opacity: 1, delay: el.dataset.index * 0.15, // 按索引延迟 onComplete: done }); }}</script>

关键点：
:css="false"禁用CSS检测，完全由JavaScript控制动画。
通过data-index传递索引，实现序列化延迟效果。

常见问题与解决

元素“跳跃”问题
原因：未处理移动动画或离开元素未脱离文档流。
解决：添加.list-move过渡类，并对离开元素设置position: absolute。
动画不触发
检查项：
确保key唯一且稳定（避免用数组索引作为key）。
确认CSS类名前缀与name属性匹配（如name="list"对应.list-enter-active）。
性能优化
对复杂动画使用transform和opacity（避免重排）。
大量列表项时考虑虚拟滚动（如配合vue-virtual-scroller）。

总结

<TransitionGroup>通过灵活的CSS和JavaScript钩子，为动态列表提供了丰富的动画控制能力。掌握其与<Transition>的区别、移动动画的处理以及渐进延迟技巧，可以显著提升用户体验。实际应用中需结合具体场景调整动画参数和定位策略。

您可能感兴趣问答

Collapsible

热门标签

热点问答