transition

<template>

  <div @click="flag = !flag">switch</div>

  <transition name="fade">

    <div v-if="flag" class="box">Hello World</div>

  </transition>

  </template>

 

  <script setup lang='ts'>

  import { ref } from 'vue'

 

  let flag = ref(true)

  </script>

 

  <style scoped lang='scss'>

  .box {

    width: 100px;

    height: 100px;

    background-color: red;

  }

  // 根据transition的name属性,设置动画效果

  .fade-leave-form {

    width: 0px;

    height: 0px;

  }

  .fade-enter-active {

    transition: all 1s ease;

  }

  .fade-enter-to {

    width: 200px;

    height: 200px;

  }

  .fade-leave-form {

    width: 200px;

    height: 200px;

  }

  .fade-leave-active {

    transition: all 5s ease;

  }

  .fade-leave-to {

    width: 0px;

    height: 0px;

  }

  </style>