Vue动态高度展开收起：平滑过渡与组件封装实战
1. 为什么需要动态高度展开收起功能
在Web开发中，展开收起功能随处可见，比如评论区、折叠菜单、详情卡片等。但很多开发者会遇到一个共同痛点：当内容高度不固定时，如何实现流畅的展开收起动画？
传统做法是使用CSS的max-height过渡，但这存在明显缺陷。比如设置max-height: 1000px，当实际高度只有100px时，动画会显得很"飘"，不够精准。而如果max-height设置过小，又会导致内容被截断。
我在实际项目中就遇到过这种情况：一个商品详情组件，不同商品的描述文字长度差异很大。最初用max-height方案，用户反馈动画效果很"假"。后来改用动态计算高度的方式，效果立竿见影。
2. 核心原理：transition与velocity-animate
2.1 Vue的transition组件
Vue的transition组件提供了进入/离开过渡的钩子函数，这正是我们需要的：
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" > <div v-show="show">内容</div> </transition>每个钩子函数都会在动画的不同阶段被调用，我们可以利用这些时机来精确控制动画。
2.2 velocity-animate的优势
虽然CSS动画也能实现过渡效果，但velocity-animate提供了更强大的功能：
- 性能更好：自动开启硬件加速
- 更丰富的缓动函数
- 支持滚动、变换等多种动画
- 可以链式调用多个动画
特别是在处理动态高度时，velocity的height动画比纯CSS方案更加流畅。
3. 原生实现方案
3.1 基础组件结构
我们先看一个完整的实现方案：
<template> <div class="expand-container"> <transition name="expand" @enter="enter" @before-leave="beforeLeave" @leave="leave" > <div v-show="expanded" class="expand-content" ref="content"> <slot></slot> </div> </transition> <button @click="toggle">{{ expanded ? '收起' : '展开' }}</button> </div> </template> <script> import velocity from 'velocity-animate' export default { props: { duration: { type: Number, default: 300 } }, data() { return { expanded: false, contentHeight: 0 } }, methods: { toggle() { this.expanded = !this.expanded }, enter(el, done) { velocity( el, { height: this.contentHeight + 'px' }, { duration: this.duration, complete: done } ) }, beforeLeave(el) { this.contentHeight = el.clientHeight el.style.height = this.contentHeight + 'px' }, leave(el, done) { velocity( el, { height: '0px' }, { duration: this.duration, complete: done } ) } } } </script> <style scoped> .expand-content { overflow: hidden; } </style>3.2 关键点解析
beforeLeave钩子：在收起动画开始前，记录当前内容高度。这是实现动态高度的关键。
enter钩子：使用velocity将高度从0过渡到记录的高度。
leave钩子：将高度从当前值过渡到0。
overflow: hidden：防止内容在动画过程中溢出。
3.3 实际应用中的优化
在实际项目中，我通常会做以下优化：
- 添加
v-resize指令监听内容变化，自动更新高度 - 支持自定义缓动函数
- 添加
disabled状态，防止快速点击导致动画错乱 - 支持异步内容加载
4. ElementUI集成方案
如果你的项目已经使用ElementUI，可以利用其内置的el-collapse-transition组件。
4.1 基本实现
<template> <div class="el-expand-container"> <el-collapse-transition> <div v-show="expanded" class="el-expand-content"> <slot></slot> </div> </el-collapse-transition> <el-button @click="toggle" type="text"> {{ expanded ? '收起' : '展开' }} </el-button> </div> </template> <script> export default { data() { return { expanded: false } }, methods: { toggle() { this.expanded = !this.expanded } } } </script> <style scoped> .el-expand-content { overflow: hidden; } </style>4.2 与原生方案的对比
优点：
- 无需额外依赖
- 与ElementUI风格统一
- 内置了更多边界情况处理
缺点：
- 定制性较差
- 动画效果相对简单
- 依赖ElementUI，不适合非Element项目
5. 高级技巧与常见问题
5.1 嵌套展开组件
当有多个展开组件嵌套时，可能会遇到z-index问题。解决方案是：
.expand-container { position: relative; z-index: 1; }5.2 异步内容处理
如果内容是异步加载的，需要在内容加载完成后手动触发高度计算：
this.$nextTick(() => { this.$refs.content.style.height = 'auto' this.contentHeight = this.$refs.content.clientHeight this.$refs.content.style.height = '0px' })5.3 性能优化
对于频繁切换的场景，可以添加防抖：
import { debounce } from 'lodash' methods: { toggle: debounce(function() { this.expanded = !this.expanded }, 300) }6. 组件封装最佳实践
6.1 属性设计
一个好的展开组件应该支持以下属性：
props: { duration: Number, easing: String, disabled: Boolean, defaultExpanded: Boolean, // 是否在收起时保留DOM destroyOnClose: Boolean }6.2 事件设计
应该提供这些事件：
@expand="handleExpand" // 展开时触发 @collapse="handleCollapse" // 收起时触发 @change="handleChange" // 状态变化时触发6.3 插槽设计
至少应该提供两个插槽：
<slot name="content">默认内容</slot> <slot name="trigger"> <button>{{ expanded ? '收起' : '展开' }}</button> </slot>7. 实际项目中的应用
在我最近的一个后台管理系统中，使用了封装后的展开组件来实现这些功能：
- 表格行详情展开
- 复杂表单的分步填写
- 侧边栏菜单的折叠
- 长文本的
特别是在表格行展开场景，组件需要处理：
- 动态高度的计算
- 多行同时展开的性能
- 表格滚动时的定位
通过合理的封装，这些功能都得到了很好的实现。