Vue动态高度展开收起组件：平滑过渡与自适应布局实战
1. 为什么需要动态高度展开收起组件？
在开发后台管理系统或者移动端应用时，经常会遇到需要折叠内容的场景。比如一个长长的表单、一堆用户评论、或者一个复杂的配置面板。传统的做法是直接使用v-show或者v-if来控制显示隐藏，但这样切换会显得很生硬，用户体验不佳。
更糟糕的是，当内容高度不固定时，简单的CSS过渡动画往往无法正常工作。比如一个评论区，每条评论的长度可能都不一样，直接使用max-height过渡会出现卡顿或者速度不一致的问题。这时候就需要一个能够动态计算高度，并且实现平滑过渡的解决方案。
我在实际项目中就遇到过这样的需求：一个后台管理系统的配置面板，里面的选项会根据用户权限动态变化，导致每次展开时高度都不一样。最初用max-height硬编码了一个很大的值，结果动画效果非常奇怪，展开时快得像闪电，收起时又慢得像蜗牛。
2. 基础实现方案：transition + 动态高度计算
2.1 核心思路解析
要实现一个真正平滑的动态高度展开收起效果，关键在于三点：
- 准确获取内容元素的真实高度：在展开前要知道最终要过渡到的高度
- 使用JavaScript动画库处理过渡：CSS过渡对动态高度支持有限
- 保持周边布局的协调性：展开收起时不影响页面其他元素的布局
这里我推荐使用velocity-animate这个轻量级动画库，它比直接使用CSS过渡更灵活，性能也更好。下面是一个基础实现：
<template> <div class="container"> <transition @enter="enter" @leave="leave" @before-leave="beforeLeave"> <div v-show="isExpanded" class="content" ref="content"> <!-- 动态内容区域 --> <slot></slot> </div> </transition> <button @click="toggle">{{ isExpanded ? '收起' : '展开' }}</button> </div> </template> <script> import velocity from 'velocity-animate' export default { data() { return { isExpanded: false, contentHeight: 0 } }, methods: { toggle() { this.isExpanded = !this.isExpanded }, enter(el, done) { velocity(el, { height: this.contentHeight }, { duration: 300, complete: done }) }, beforeLeave(el) { this.contentHeight = el.clientHeight }, leave(el, done) { velocity(el, { height: 0 }, { duration: 300, complete: done }) } } } </script> <style scoped> .content { overflow: hidden; } </style>2.2 关键点解析
这个实现有几个关键点需要注意：
- beforeLeave钩子：在收起动画开始前，先记录下当前内容的高度，这样下次展开时就知道要过渡到什么高度
- overflow: hidden：必须设置这个样式，否则内容会在过渡期间溢出
- velocity的complete回调：确保动画完成后Vue能正确更新状态
我在实际使用中发现，如果不使用beforeLeave记录高度，而是每次都在enter中实时计算，有时会因为DOM更新延迟导致高度计算不准确。这个坑我踩了好几次才找到原因。
3. 进阶技巧：与周边布局联动
3.1 自适应布局问题
单纯的展开收起效果实现起来不难，但当这个组件是页面布局的一部分时，就会出现新问题：展开收起会影响周围元素的位置。比如下面这种常见布局：
+-------------------+ | 头部 | +-------------------+ | | | 可折叠内容区 | | | +-------------------+ | 底部 | +-------------------+当中间的内容区展开收起时，我们希望底部区域能平滑地上下移动，而不是突然跳变。这就需要我们在做高度过渡的同时，也调整底部区域的位置。
3.2 实现方案
这里的关键是要在高度变化时，实时计算并调整相关元素的位置。我们可以利用Vue的响应式特性和CSS过渡来实现：
methods: { enter(el, done) { velocity(el, { height: this.contentHeight }, { duration: 300, progress: () => this.updateLayout(), complete: done } ) }, leave(el, done) { velocity(el, { height: 0 }, { duration: 300, progress: () => this.updateLayout(), complete: done } ) }, updateLayout() { // 根据当前高度实时更新周边布局 const contentHeight = this.$refs.content.clientHeight this.$refs.footer.style.marginTop = `${contentHeight}px` } }在实际项目中，我通常会把这个逻辑封装成一个mixin，这样不同的布局组件都可以复用这个行为。特别是在移动端H5页面中，这种平滑的布局调整对用户体验提升非常明显。
4. 性能优化与边界情况处理
4.1 减少重排重绘
动态高度计算和布局调整会触发浏览器的重排(reflow)和重绘(repaint)，如果处理不当会导致页面卡顿。经过多次实践，我总结了几个优化点：
- 使用will-change：提前告知浏览器哪些属性会变化
.content { will-change: height; } - 节流高频操作：如果内容高度会随窗口大小变化，要适当节流
- 避免同步强制布局：不要在连续操作中多次读取布局属性
4.2 处理动态内容变化
有时候，展开的内容本身也会变化，比如异步加载更多数据。这时候需要特别注意高度重新计算的问题。我的做法是：
watch: { async contentData() { if (!this.isExpanded) return await this.$nextTick() this.contentHeight = this.$refs.content.scrollHeight // 需要重新触发过渡动画 } }这里有个小技巧：可以先用display: none隐藏内容区，等高度计算完成后再触发动画，这样用户不会看到闪烁。
5. 与UI框架集成实践
5.1 ElementUI集成方案
如果项目中使用ElementUI，可以直接使用它的el-collapse-transition组件，这是官方提供的折叠过渡组件。不过它默认只处理高度过渡，不处理周边布局调整。
我通常会在它的基础上进行二次封装：
<template> <div class="custom-collapse"> <el-collapse-transition> <div v-show="expanded" class="content-wrapper"> <div class="content" ref="content"> <slot></slot> </div> </div> </el-collapse-transition> <!-- 其他布局元素 --> </div> </template>5.2 响应式设计考虑
在移动端，还需要考虑横竖屏切换时的表现。我通常会添加一个resize观察器：
mounted() { this.resizeObserver = new ResizeObserver(() => { if (this.isExpanded) { this.contentHeight = this.$refs.content.scrollHeight } }) this.resizeObserver.observe(this.$refs.content) }, beforeDestroy() { this.resizeObserver.disconnect() }这样无论内容是因为数据变化还是屏幕旋转导致尺寸变化，高度都能及时更新。