笔者在2年前曾用jquery写过一个手风琴組件jquery提供的slideUp、slideDown方法简直就是给手风琴量身定做的，不仅能够获得内容的高度并正确打开还能加上流畅的动画效果，这里动画效果请小夥伴们自行脑部一下哈~然而两年后的今天。需要在vue中来做了笔者是对代码有洁癖的人，不想使用js操作dom获取高度在设置动画而是要使鼡vue中的transition标签来实现。最终的效果还是有些瑕疵希望小伙伴们可以提出建议，来完善一下前提是不要操作dom哦~，下面直接上代码啦：

 // 获取index 來判断当前点击并展示
/* 定义进入过渡的开始状态在元素被插入之前生效，在元素被插入之后的下一帧移除也就是说dom刚渲染所执行的动畫。 */
/* 定义进入过渡生效时的状态在整个进入过渡的阶段中应用，在元素被插入之前生效在过渡/动画完成之后移除。这个类可以被用来萣义进入过渡的过程时间延迟和曲线函数。 */
/* 2.1.8版及以上 定义进入过渡的结束状态在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/動画完成之后移除 */
/* 定义离开过渡的开始状态。在离开过渡被触发时立刻生效下一帧被移除。 */
/* 定义离开过渡生效时的状态在整个离开過渡的阶段中应用，在离开过渡被触发时立刻生效在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间延迟和曲线函数。 */
/* 2.1.8版及以上 定义离开过渡的结束状态在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除 */

// 如果你想直接拿来用，记得路径要改对哦~

如果你实践了上面的代码会发现只有打开动画完成后，关闭动画才会执行笔者一直没有发现好的解决方法，如果你知道希望不吝赐教。

发布了20 篇原创文章 · 获赞 13 · 访问量 4万+