学习Vue3 第十九章（内置组件-Transition基础使用-自定义过渡 class）

<template>
  <button @click="show = !show">切换</button>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div v-if="show" class="box"></div>
  </transition>
</template>
<script setup>
import { ref } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import 'animate.css'
const show = ref(false)
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

更方便一点，不需要自己在手写css动画，用animate.css库， 注意 animate__animated这个类名是公共的，都要写