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>