transition appear

<template>

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

  <transition

    appear

    appear-from-class="from"

    appear-active-class="active"

    appear-to-class="to">

    <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属性,设置动画效果

  .from {

    width: 0px;

    height: 0px;

  }

  .active {

    transition: all 1s ease;

  }

  .to {

    width: 200px;

    height: 200px;

  }

  </style>