学习链接

原生js手动实现一个多级菜单效果（高度可过渡变化） - 自己的链接
vue实现折叠展开收缩动画 - 自己的链接

效果

代码

• 在使用element-plus的折叠组件的时候，一般用的是<el-collapse>组件，然后再嵌套<el-collapse-item>组件，但是这里，可以直接从element的源码中引入CollapseTransition组件，更加方便的控制div容器的收缩隐藏了
• 不用自己写那些transition过渡动画的钩子，也不用网上抄，直接引入，即可使用（element帮我们写了，直接用就行，它的本质就是用的scrollHeight）
• 使用v-show或v-if都行，element-ui和element-plus里面都有

<template>

    <CollapseTransition>
        <div v-show="show" style="width: 500px;border: 1px solid red;border-radius: 4px;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit corrupti tempore nam, itaque est doloribus ea inventore similique corporis eos quae tempora pariatur deserunt exercitationem ipsum illum. Aspernatur ullam quae harum aliquam nam at dignissimos quas necessitatibus, deserunt atque cupiditate quibusdam sequi assumenda? Excepturi cupiditate asperiores ullam qui sequi officia!
        </div>
    </CollapseTransition>
    
    <el-button type="primary" plain @click="show = !show">show/hide</el-button>
    
</template>

<script setup>

import { ref,reactive } from 'vue'

import CollapseTransition from 'element-plus/lib/components/collapse-transition/src/collapse-transition';

const show = ref(true)


</script>

<style lang="scss"></style>