Vue3+TypeScript学习笔记（十五）

写在前面：除v-if外，其他的props（包括enter-active-class之类）都要写在transition标签上，直接写在原生/组件标签身上将不会有任何效果！

1. transition也是Vue的一个内置组件，主要用来控制模板中元素的动画效果。需要注意的是transition中仅能有一个根标签，否则将报错

仅能有一个根标签

<!-- 正常 -->
<transition>
    <div>
        <div></div>
    </div>
</transition>

<!-- 报错 -->
<transition>
    <div></div>
    <div></div>
</transition>

1. 安装动画库：pnpm add animate.css

完整代码：
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相同