<template>
<button @click="show = !show">切换</button>
<transition name="fade">
<div v-if="show" class="box"></div>
</transition>
</template>
<script setup>
import { ref } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
const show = ref(false)
</script>
<style scoped>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.fade-enter-from,
.fade-leave-to {
width: 0px;
height: 0px;
}
.fade-enter-active,
.fade-leave-active {
transition: all 1s ease;
}
</style>
