elment-ui/plus不定高度容器收缩折叠动画组件

ps酷教程

已于 2023-05-13 23:02:51 修改

阅读量741

点赞数

分类专栏：前端学习文章标签： ui vue.js 前端

于 2023-05-13 22:59:21 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/130663558

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

文章目录

学习链接

原生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>