CSS点击切换或隐藏盒子的卷起、展开效果

<template>   <div class="main">     <el-button @click="onCllick">切换</el-button>     <transition name="slideDown">       <div class="info" v-if="isShow">1111</div>     </transition>   </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs } from 'vue' export default defineComponent({   name: 'login-account ',   components: {},   setup(props, { emit, slots, attrs }) {     const state = reactive({       isShow: false     })     const onCllick = () => {       console.log('切换')       state.isShow = !state.isShow     }     return {       ...toRefs(state),       onCllick     }   } }) </script> <style lang="less"> .info {   width: 100px;   height: 400px;   background-color: skyblue;   margin: 0 auto; } .slideDown-enter-active, .slideDown-leave-active {   transition: all 0.5s ease-in-out; } .slideDown-enter-from {   height: 0; } .slideDown-leave-to {   height: 0; } </style>