transition 動畫組件
1.過渡的類名
在進(jìn)入/離開的過渡中，會有 6 個 class 切換酌摇。
1.v-enter-from：定義進(jìn)入過渡的開始狀態(tài)淫痰。在元素被插入之前生效病瞳，在元素被插入之后的下一幀移除践惑。
2.v-enter-active：定義進(jìn)入過渡生效時的狀態(tài)。在整個進(jìn)入過渡的階段中應(yīng)用乡恕，在元素被插入之前生效言询，在過渡/動畫完成之后移除俯萎。這個類可以被用來定義進(jìn)入過渡的過程時間，延遲和曲線函數(shù)运杭。
3.v-enter-to：定義進(jìn)入過渡的結(jié)束狀態(tài)夫啊。在元素被插入之后下一幀生效 (與此同時 v-enter-from 被移除)，在過渡/動畫完成之后移除辆憔。
4.v-leave-from：定義離開過渡的開始狀態(tài)撇眯。在離開過渡被觸發(fā)時立刻生效，下一幀被移除虱咧。
5.v-leave-active：定義離開過渡生效時的狀態(tài)熊榛。在整個離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時立刻生效腕巡，在過渡/動畫完成之后移除玄坦。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函數(shù)绘沉。
6.v-leave-to：離開過渡的結(jié)束狀態(tài)煎楣。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave-from 被移除)，在過渡/動畫完成之后移除车伞。
示例
<template>
<button @click='flag = !flag'>切換</button>
<transition name='fade'>
<div v-if='flag' class="box"></div>
</transition>
</template>
<style>
/* 開始過渡 */
.fade-enter-from{
background:red;
width:0px;
height:0px;
transform:rotate(360deg)
}
/* 開始過渡了 */
.fade-enter-active{
transition: all 2.5s linear;
}
/* 過渡完成 */
.fade-enter-to{
background:yellow;
width:200px;
height:200px;
}
/* 離開的過渡 */
.fade-leave-from{
width:200px;
height:200px;
transform:rotate(360deg)
}
/* 離開中過渡 */
.fade-leave-active{
transition: all 1s linear;
}
/* 離開完成 */
.fade-leave-to{
width:0px;
height:0px;
}
</style>
- 自定義過渡類名
- enter-from-class
- enter-active-class
- enter-to-class
- leave-from-class
- leave-active-class
- leave-to-class
動畫庫：animate.css
安裝
npm i animate.css
<template>
<div class="content">
<button @click="flag = !flag">切換</button>
<transition
:duration="{ enter: 500, leave: 500 }"
leave-active-class="animate__animated animate__bounce"
enter-active-class="animate__animated animate__bounceInUp"
>
<div v-if="flag" class="box">演示動畫</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import "animate.css";
const flag = ref<boolean>(true);
</script>
過渡時間
duration ：動畫的執(zhí)行時間（以毫秒計）
<transition :duration="1000">...</transition>
分別指定進(jìn)入和離開的持續(xù)時間：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
transtion 生命周期
transiton 生命周期8個
@before-enter="beforeEnter" //對應(yīng)enter-from
@enter="enter"http://對應(yīng)enter-active
@after-enter="afterEnter"http://對應(yīng)enter-to
@enter-cancelled="enterCancelled"http://顯示過渡打斷
@before-leave="beforeLeave"http://對應(yīng)leave-from
@leave="leave"http://對應(yīng)enter-active
@after-leave="afterLeave"http://對應(yīng)leave-to
@leave-cancelled="leaveCancelled"http://離開過渡打斷
當(dāng)只用 JavaScript 過渡的時候择懂，在 enter 和 leave 鉤子中必須使用 done 進(jìn)行回調(diào)。
結(jié)合gsap 動畫庫使用 GreenSock
<button @click="flag = !flag">切換</button>
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="flag" class="box">演示動畫</div>
</transition>
const beforeEnter = (el: Element) => {
gsap.set(el, {
scaleX: 0.8,
scaleY: 1.2,
});
};
const enter = (el: Element, done: gsap.Callback) => {
gsap.to(el, {
duration: 1,
scaleX: 1.5,
scaleY: 0.7,
opacity: 1,
x: 150,
ease: "elastic.inOut(2.5, 1)",
onComplete: done,
});
};
const leave = (el: Element, done: gsap.Callback) => {
gsap.to(el, {
duration: 0.7,
scaleX: 1,
scaleY: 1,
x: 300,
ease: "elastic.inOut(2.5, 1)",
});
gsap.to(el, {
duration: 0.2,
delay: 0.5,
opacity: 0,
onComplete: done,
});
};
appear: 設(shè)置初始節(jié)點過渡另玖，頁面加載完成就開始動畫
<transition
appear
name="fade"
>
<div class="box">演示動畫</div>
</transition>
