vue轻松实现折叠面板功能

如上图的折叠面板功能你是否有去实现过呢？如果有那你的实现方式是什么样的？遇到了什么问题？
如果没有那就看看我的实现方式吧

1、最大的难题

这种折叠效果实际控制的是元素的高度，css、js控制元素高度的属性有height、max-height。

既然是通过height来实现，那很简单，我直接通过样式来解决，如下：

.collapse-transition-enter-from,
.collapse-transition-leave-to{
  height: 0;
}
.collapse-transition-enter-active,
.collapse-transition-leave-active{
  overflow: hidden;
  transition: height .3s ease-in-out, padding .3s ease-in-out, max-height .3s ease-in-out;
}
.collapse-transition-enter-to,
.collapse-transition-leave-from{
  height: auto;
}

自信的写完上述代码并运行后你会发现，这并任何没有过渡效果，并且元素在隐藏的时候还有点卡顿的感觉

这是为什么呢？ 原因是：transition对height: auto无效，height必须设置除auto外的有效值才会生效

那么问题来了，该什么时候获取并设置元素的高度？什么时候该恢复元素的高度？
答案是：

• 1、进入时，过渡效果进入后获取并设置元素的高度，进入过渡效果完成后立即恢复
• 2、离开时，过渡效果离开前获取并设置元素的高度，离开过渡效果完成后立即恢复
  这里涉及到了4个时机，因此光靠css是完成不了的，还需依靠组件的钩子

2、完整代码

看完代码后你可能会奇怪为什么是设置元素的max-height而不是元素的height?
这么做的原因是：不管元素本身有没有通过style设置height，都不会影响元素高度的计算

3、使用组件

最终效果：

4、最后

有了这个组件后想实现折叠面板组件、菜单组件、树组件等就轻而易举了！