8个钩子函数

@before-enter="xx" 对应enter-from,在元素被插入到DOM之前被调用，动画进入之前
@enter="xx" 对应enter-active，动画开始执行时调用
@after-enter="xx" 对应enter-to 过渡完成后调用
@enter-cancelled="xx" 显示过渡的效果被打断调用 比如来回切换动画时候，就属于打断
@before-leave="xx" 对应leave-form 在leave钩子之前被调用
@leave="xx" 对应leave-active 在离开过渡开始时调用
@after-leave="xx" 对应leave-to 离开过渡完成时调用
@leave-cancelled="xx"离开过渡的效果被打断调用

使用方法

在transition中定义钩子函数即可,每一个钩子函数都携带一个el的回调函数，就是当前的DOM元素

其中@enter和@leave,除了携带el参数，还携带一个done函数,用来表示过渡效果什么时候完成或离开完成的时候，默认同步执行

    <transition 
    @before-enter="EnterFrom" 
    @enter="EnterActive" 
    @after-enter="EnterTo"
    @enter-cancelled="EnterCancel" 
    @before-leave="LeaveForm" 
    @leave="LeaveActive" 
    @after-leave="LeaveTo"
    @leave-cancelled="LeaveCancel">
      <div v-if="flag" class="box"></div>
    </transition>

下面代码较多就不展示了，效果图演示一下执行的顺序

QQ录屏20230613144334.gif

配合第三方库

Vue推荐使用gsap动画库,非常酷炫,官网地址

使用方法

//安装
npm i gsap -S
//引入 
import gsap from 'gsap'

过渡前可以通过gsap.set去使用，第一个参数是元素，第二个是配置项，配置CSS的样式

const EnterFrom = (el:Element) => {
  gsap.set(el, {
    width: 0,
    height:0
  })
}

在过渡的过程中使用gsap.to,第一个参数是元素，第二个是配置项，在过渡完成之后会有一个onComplete回调函数，来触发钩子函数的done

const EnterActive = (el:Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done
  })
}

过渡离开也是使用gsap.to，配置CSS的元素归零即可

appear

一进入页面开始加载，通过这个属性可以设置初始节点过渡在transition上定义appear就可以使用了，有三种状态，搭配CSS样式或者第三方动画库使用

appear-from-class=""
appear-active-class=""
appear-to-class=""

需要注意的是这个appear只有初始化的时候显示，其他的切换等操作，还是需要之前方法，

transition的生命周期

8个钩子函数

使用方法

配合第三方库

appear