transition生命周期配合gsap

<template>

  <div @click="flag = !flag">switch</div>

  <transition

    name="fade"

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter"

    @enter-cancelled="enterCancelled"

    @before-leave="beforeLeave"

    @leave="leave"

    @after-leave="afterLeave"

    @leave-cancelled="leaveCancelled">

    <div v-if="flag" class="box">Hello World</div>

  </transition>

  </template>

 

  <script setup lang='ts'>

  import { ref } from 'vue'

  import gsap from 'gsap'

  let flag = ref(true)

  // befor和after无法获取到el和done事件

  const beforeEnter = (() => {

    console.log('beforeEnter')

  })

  const enter = ((el:Element, done: Function) => {

    // console.log('enter',el,done())

    // setTimeout(() => {

    //   done() // 设置了定时器执行done,会等待定时器结束后执行done后再执行下一个生命周期

    // }, 1000);

    gsap.set(el, { x: 100, y: 100 }) // gsp用法

  })

  const afterEnter = (() => {

    console.log('afterEnter')

  })

  const enterCancelled = ((el:Element) => {

    console.log('enterCancelled',el)

  })

  const beforeLeave = (() => {

    console.log('beforeLeave')

  })

  const leave = ((el:Element, done: gsap.Callback) => {

    // console.log('leave',el,done())

    gsap.to(el, { x: 0, y: 0, onComplete: done }) // gsp用法

  })

  const afterLeave = (() => {

    console.log('afterLeave')

  })

  const leaveCancelled = ((el:Element) => {

    console.log('leaveCancelled',el)

  })

  </script>

 

  <style scoped lang='scss'>

  .box {

    width: 100px;

    height: 100px;

    background-color: red;

  }

  // 根据transition的name属性,设置动画效果

  .fade-leave-form {

    width: 0px;

    height: 0px;

  }

  .fade-enter-active {

    transition: all 1s ease;

  }

  .fade-enter-to {

    width: 200px;

    height: 200px;

  }

  .fade-leave-form {

    width: 200px;

    height: 200px;

  }

  .fade-leave-active {

    transition: all 5s ease;

  }

  .fade-leave-to {

    width: 0px;

    height: 0px;

  }

  </style>