写在前面：除v-if外，其他的props（包括enter-active-class之类）都要写在transition标签上，直接写在原生/组件标签身上将不会有任何效果！
- transition也是Vue的一个内置组件，主要用来控制模板中元素的动画效果。需要注意的是transition中仅能有一个根标签，否则将报错
仅能有一个根标签
<!-- 正常 -->
<transition>
<div>
<div></div>
</div>
</transition>
<!-- 报错 -->
<transition>
<div></div>
<div></div>
</transition>- 安装动画库：pnpm add animate.css
| props | 作用 |
|---|---|
| name | 规定动画的类名前缀（若无则为v） |
| duration | 规定过渡的持续时间——严格来讲是含有过渡的active类出现在元素身上的时间，主要目的是防止嵌套元素中父元素过渡过早完成（传入一个number则同时控制进入和离开，传入一个{enter:,leave:}的对象则分别控制进入和离开） |
| enter-active-class | 进入动画的类名，如需使用动画库或不想使用name-class-enter，希望自定义动画类名时使用 |
| leave-active-class | 离开动画的类名，如需使用动画库或不想使用name-class-leave，希望自定义动画类名时使用 |
完整代码：
App.vue
<template>
<!-- 最简单的使用方法,仅规定了name -->
<div class="card">
<transition name="box">
<A v-if="flag"></A>
</transition>
<button @click="flag = !flag">显示/隐藏组件</button>
</div>
<!-- 使用动画库,需要注意的是从animate.css4版本开始,动画类名前要加上animate__animated才能生效 -->
<div>
<transition
:duration="{ enter: 1000, leave: 0 }"
enter-active-class="animate__animated animate__fadeInLeftBig"
>
<B v-if="flag2"></B>
</transition>
<button @click="flag2 = !flag2">显示/隐藏组件2</button>
</div>
<!-- 使用类名代替three-enter-active和three-leave-active。因为是动画所以无需three-enter-from之类 -->
<div>
<transition name="three" enter-active-class="enterOne" leave-active-class="leaveOne">
<C v-if="flag3"></C>
</transition>
</div>
<button @click="flag3 = !flag3">显示/隐藏组件3</button>
</template>
<script setup lang="ts">
import 'animate.css'
import { ref, reactive } from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'
let flag = ref(true)
let flag2 = ref(true)
let flag3 = ref(true)
</script>
<style scoped>
.card {
border: 1px solid black;
}
.background {
width: 200px;
height: 200px;
background-color: red;
}
.box-enter-from {
width: 0;
height: 0;
}
.box-enter-active {
transition: all 1s ease;
}
.box-enter-to {
width: 200px;
height: 200px;
transform: rotate(-360deg);
}
.box-leave-from {
width: 200px;
height: 200px;
}
.box-leave-active {
transition: all 1s ease;
}
.box-leave-to {
width: 0;
height: 0;
transform: rotate(360deg);
}
.enterOne {
animation: bounce-in 1s ease;
}
.leaveOne{
animation: bounce-in 1s ease reverse;
}
@keyframes bounce-in {
from {
width: 0;
height: 0;
}
to {
width: 200px;
height: 200px;
}
}
</style>
A.vue
<template>
<div></div>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
</script>
<style scoped>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>B和C除了背景颜色background-color不一样，其他都和A相同
