【vue3】Transition过渡组件

Transition是自带的内部组件，无需引入，直接使用

        <Transition
            :duration="500"  //动画持续时间
            name="my-animate"
            enter-from-class="xxx"
            enter-active-class="xxx"
            enter-to-class="xxx"
            leave-from-class="xxx"
            leave-active-class="xxx"
            leave-to-class="xxx"
            >
            <div v-if="flag" class="box"></div>
        </Transition>

一、基本用法

• Transition 自带的内部组件
• xxx-enter-from 开始进入过渡 0%
• xxx-enter-active 过渡过程
• xxx-enter-to 过渡完成 100%
• xxx-leave-from 开始退出 0%
• xxx-leave-active 退出过程
• xxx-leave-to 退出完成 100%
  xxx是组件属性name的值，自定义的。我使用的是fade-box

<template>

    <div>
        <el-button @click="flag = !flag">change</el-button>
        <Transition name="fade-box">
            <div v-if="flag" class="box"></div>
        </Transition>
    </div>

</template>

<script setup lang='ts'>
    import { ref } from 'vue'
    const flag = ref(false)

</script>
<style scoped lang='scss'>
.box{
    width: 200px;
    height: 200px;
    background-color: red;
}

.fade-box-enter-from{
    width: 0;
    height: 0;
}
.fade-box-enter-active{
    transition: all 2s ease-in-out;
}
.fade-box-enter-to{
    width: 200px;
    height: 200px;
}
.fade-box-leave-from{

    width: 200px;
    height: 200px;
}
.fade-box-leave-active{
    transition: all 2s ease-in-out;
}
.fade-box-leave-to{
    width: 0;
    height: 0;
}


</style>

二、自定义class类名

        <Transition 
            enter-from-class="enter-from" 
            enter-active-class="enter-active" 
            enter-to-class="enter-to" 
            leave-from-class="leave-from" 
            leave-active-class="leave-active" 
            leave-to-class="leave-to" 
            >
            <div v-if="flag" class="box"></div>
        </Transition>

.enter-from{
    width: 0;
    height: 0;
}
.enter-active{
    transition: all 2s ease-in-out;
}
.enter-to{
    width: 200px;
    height: 200px;
}
.leave-from{

    width: 200px;
    height: 200px;
}
.leave-active{
    transition: all 2s ease-in-out;
}
.leave-to{
    width: 0;
    height: 0;
}

三、通过自定义class结合css动画库animate.css

animate.css官网
安装库：npm install --save-dev animate.css
引入：import 'animate.css'
主要是在enter-active-class内使用

效果图、代码如下：

        <Transition 
            :duration="{enter:500,leave:1000}"
            enter-active-class="animate__animated animate__rubberBand" 
            leave-active-class="animate__animated animate__backOutDown" 
            >
            <div v-if="flag" class="box"></div>
        </Transition>


<script setup lang='ts'>
    import 'animate.css'
    import { ref } from 'vue'
    const flag = ref(false)

</script>

四、生命周期

 		<Transition 
            @before-enter="enterFrom" 
            @enter="enterActive" 
            @after-enter="xxx"
            @enter-cancelled="xxx"
            @before-leave="xxx"
            @leave="leaveActive" 
            @after-leave="xxx"
            @leave-cancelled="xxx"
            @before-appear="xxx"
            @appear="xxx"
            @after-appear="xxx">
            <div v-if="flag" class="box"></div>
        </Transition>

const xxx = (el: Element) => {
    console.log( el)
}
const enterActive = (el: Element, done: Function) => {
    console.log('进入过渡曲线', el)
}

五、GSAP（js动画库）

GSAP官网地址
安装库：npm install --save-dev gsap
引入：import gsap from 'gsap'

  		<Transition 
            @before-enter="enterFrom" 
            @enter="enterActive" 
            @leave="leaveActive"
            >
            <div v-if="flag" class="box"></div>
        </Transition>



import 'animate.css'
import gsap from 'gsap'
import { ref } from 'vue'
const flag = ref(true)

const enterFrom = (el: Element) => {
    console.log('进入动画之前', el)
    gsap.set(el, {
        // width:0,
        height: 0
    })
}
const enterActive = (el: Element, done: Function) => {

    console.log('进入过渡曲线', el)
    gsap.to(el, {
        // width:200,
        height: 200,
        onComplete: () => { done() }
    })
}

const leaveActive = (el: Element, done: Function) => {
    console.log('离开过渡曲线', el)
    gsap.to(el, {
        // width:0,
        height: 0,
        onComplete: () => { done() }
    })
}

六、appear属性

通过appear属性，可以设置初始节点过渡，就是页面加载完成就开始动画，对应3个状态：appear-from、appear-active、appear-to

  		<Transition
            appear
            appear-active-class="animate__animated animate__tada" 
            appear-from-class="from" 
            appear-to-class="to">
            <div v-if="flag" class="box"></div>
        </Transition>
        
        
		.from{
			...
		}
		.to{
			...
		}