transition 动画组件

1.过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

1.v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
4.v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 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>

2. 自定义过渡类名

• 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 ：动画的执行时间（以毫秒计）

<transition :duration="1000">...</transition>

分别指定进入和离开的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

transtion 生命周期

transiton 生命周期8个

 @before-enter="beforeEnter" //对应enter-from
 @enter="enter"//对应enter-active
 @after-enter="afterEnter"//对应enter-to
 @enter-cancelled="enterCancelled"//显示过渡打断
 @before-leave="beforeLeave"//对应leave-from
 @leave="leave"//对应enter-active
 @after-leave="afterLeave"//对应leave-to
 @leave-cancelled="leaveCancelled"//离开过渡打断

当只用 JavaScript 过渡的时候，在 enter 和 leave 钩子中必须使用 done 进行回调。

结合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: 设置初始节点过渡，页面加载完成就开始动画

<transition
    appear
    name="fade"
>
<div class="box">演示动画</div>
</transition>