transition组件的使用

<template><button @click="flag = !flag">切换</button><transition name="fade"><div v-if="flag" class="box"></div></transition>
</template><script setup lang="ts">import { ref, reactive } from 'vue';const flag = ref(true);
</script><style scoped>.box {background: red;width: 200px;height: 200px;}/* //开始过度 */.fade-enter-from {background: red;width: 0px;height: 0px;transform: rotate(360deg);}/* //开始过度了 */.fade-enter-active {transition: all 2.5s linear;}/* //过度完成 */.fade-enter-to {background: yellow;width: 200px;height: 200px;}/* //离开的过度 */.fade-leave-from {width: 200px;height: 200px;transform: rotate(360deg);}/* //离开中过度 */.fade-leave-active {transition: all 1s linear;}.fade-leave-to {width: 0px;height: 0px;}
</style>