如果直接使用v-show,隐藏和显示不够平滑，可以使用vue element ui 自带的动画组件 el-collapse-transition来实现折叠展开效果，使用非常简单。 代码如下： ``` <template> <div> <el-button @click="show3 = !show3">Click Me</el-button> <div style="margin-top: 20px; height: 200px;"> <el-collapse-transition> <div v-show="show3"> <div class="transition-box">el-collapse-transition</div> <div class="transition-box">el-collapse-transition</div> </div> </el-collapse-transition> </div> </div> </template> <script> export default { data: () => ({ show3: true }) } </script> <style> .transition-box { margin-bottom: 10px; width: 200px; height: 100px; border-radius: 4px; background-color: #409EFF; text-align: center; color: #fff; padding: 40px 20px; box-sizing: border-box; margin-right: 20px; } </style> ``` 官方文档：https://element.eleme.cn/#/zh-CN/component/transition