结合vue的transition使用，封装一个高度自适应的手风琴效果

<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave">
    <template v-if="table.show">
    -----
    </template>
</transition>


<script>
// 折叠面板的事件
export default {
    methods: {
        beforeLeave(el) {// 给元素设置过渡效果
            el.style.transition = '0.3s height ease-in-out';// 高度变化时，让其内容隐藏
            el.style.overflow = 'hidden';
        },
        leave(el) {
            el.style.height = 'auto';// 设置高度为具体的值
            el.style.height = window.getComputedStyle(el).height;// 强制浏览器回流，否则浏览器会合并两次元素的高度更改（回流重绘的知识）
            el.offsetHeight;
            el.style.height = '0px';
        },
        afterLeave(el) {// 
            el.style.height = null;// 收尾工作，展示完过渡效果之后，设为原来的值
            el.style.transition = '';
            el.style.overflow = 'visible';
        },
        beforeEnter(el) {// 给元素设置过渡效果
            el.style.transition = '.3s height ease-in-out';// 高度变化时，让其内容隐藏
            el.style.overflow = 'hidden';
        },
        enter(el) {
            el.style.height = 'auto';// 保存元素原来的高度
            const endWidth = window.getComputedStyle(el).height;
            el.style.height = '0px';// 强制浏览器回流，否则浏览器会合并两次元素的高度更改（回流重绘的知识）
            el.offsetHeight;
            el.style.height = endWidth;
        },
        afterEnter(el) {// 
            el.style.height = null;// 收尾工作，展示完过渡效果之后，设为原来的值
            el.style.transition = '';
            el.style.overflow = 'visible';
        }
    }
}
</script>