Transition效果

Vue 提供了内置组件，可以帮助你制作基于状态变化的过渡和动画

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册

进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换

过渡效果

<template>
    <button @click="show = !show">Toggle</button>
    <Transition>
        <p v-if="show">hello</p>
    </Transition>
</template>
<script setup>
import { ref } from "vue"
const show = ref(true)
</script>
<style scoped>
.v-enter-active, .v-leave-active {
    transition: opacity 0.5s ease;
}
.v-enter-from, .v-leave-to {
    opacity: 0;
}
.v-enter-to, .v-leave-from{
    opacity: 1;
}
</style>