Vue3+TypeScript学习笔记（十七）

transition还拥有一个appear属性，作用是让transition标签中元素的动画一上来就立刻执行（下面这个代码块中动画能执行多次，只要一进入就执行）
立即执行动画

<template>
    <div class="card">
        <transition
            name="box"
            appear
        >
            <A v-if="flag"></A>
        </transition>
        <button @click="flag = !flag">显示/隐藏组件</button>
    </div>
</template>

<script setup lang="ts">
import 'animate.css'
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let flag = ref(true)

</script>

<style scoped>
.card {
    border: 1px solid black;
}
.box-enter-from{
    width:0;
    height: 0;
}
.box-enter-active{
    transition: all 3s ease;
}
.box-enter-to{
    width: 200px;
    height: 200px;
}
</style>

1. 和普通动画相同，如果不想使用name-enter-from这样的类名，可以通过appear-from-class=""、appear-active-class=""、appear-to-class=""这三个props来指定动画的类名，以更好的和animate.css之类的动画库相结合。需要注意的是以appear-开头的过渡/动画只会在一上来执行一次，之后如果不刷新页面将不再执行

显式指定过渡类名

<template>
<!--   别忘了加appear -->
    <div class="card">
        <transition
            name="box"
            appear
            appear-from-class="enter-from"
            appear-active-class="enter-active"
            appear-to-class="enter-to"
        >
            <A v-if="flag"></A>
        </transition>
        <button @click="flag = !flag">显示/隐藏组件</button>
    </div>
</template>

<script setup lang="ts">
import 'animate.css'
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let flag = ref(true)

</script>

<style scoped>
.card {
    border: 1px solid black;
}
.enter-from{
    width:0;
    height: 0;
}
.enter-active{
    transition: all 3s ease;
}
.enter-to{
    width: 200px;
    height: 200px;
}
</style>

以下这个代码块中的动画同样只能执行一次，想要再次执行必须刷新页面
结合Animate动画库使用

<template>
    <div class="card">
        <transition
            name="box"
            appear
            appear-active-class="animate__animated animate__rubberBand"
        >
            <A v-if="flag"></A>
        </transition>
        <button @click="flag = !flag">显示/隐藏组件</button>
    </div>
</template>

<script setup lang="ts">
import 'animate.css'
import { ref, reactive } from 'vue'
import A from './components/A.vue'

let flag = ref(true)
</script>

<style scoped>
.card {
    border: 1px solid black;
}
</style>