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>