CSS过渡 淡入淡出

<template>
  <input type="button" value="toggle" @click="flag = !flag" />
  <transition name="fade">
    <h3 v-show="flag">Andy</h3>
  </transition>
</template>

<script setup>
import { ref } from "vue";
import childCompontent from "./components/child.vue";

let flag = ref(true);
</script>

<style lang="less">
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active{
  transition: opacity 1s;       //淡入1s
}
.fade-leave-active {
  transition: opacity 4s;       //淡出4s
}
</style>