Vue实现手风琴效果

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

下面是父组件调用：

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