使用v-if处理盒子显示和消失
🤓 看上去很生硬,不是吗?我们来用transition组件处理一下
<template>
<div>
<el-button color="#626aef" @click="flag = !flag"> 切换组件</el-button>
<Transition name="fade">
<div class="box" v-if="flag">box</div>
</Transition>
</div>
</template>
<script setup lang="ts">
import { ref, Transition } from 'vue'
let flag = ref<boolean>(true)
</script>
<style scoped>
.box {
background-color: aqua;
width: 200px;
height: 200px;
}
.fade-enter-from,
.fade-leave-to {
width: 0;
height: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-to,
.faode-leave-from {
background-color: aqua;
width: 200px;
height: 200px;
}
</style>