vue3进入页面实现动画效果

2-1. 入场钩子：
before-enter(el)： 入场前，接收两个参数el(元素本身)、done()通知动画结束回调
enter(el, done)： 入场时执行的函数；接收两个参数el(元素本身)、done()通知动画结束回调, 只有done()执行完毕才会通知transition组件执行after-enter钩子。详细使用会在下面举例。
after-enter(el)： 入场后动画钩子

2-2. 出场钩子，同上：
before-leave(el)： 出场前，接收两个参数el(元素本身)、done()通知动画结束回调
leave(el, done)： 出场时执行的函数；接收两个参数el(元素本身)、done()通知动画结束回调
after-leave(el)： 出场后动画钩子。

例子：

App.vue

  <RouterView v-slot="{ Component, route }" v-if="isRouterAlive">
        <transition name="fade" mode="out-in"  @after-enter="handleAfterEnter">
          <component :is="Component" :key = "handleDate()" />
        </transition>
      </RouterView>

const handleAfterEnter=()=> {
    if (window.scrollY != 0) {
        window.scroll(0, 0)
    }
}

 

// 进入后和离开前保持原位
.fade-right-enter-to,
.fade-right-leave-from{
  opacity: 1;
  transform: none;
}
 
// 设置进入和离开过程中的动画时长0.5s
.fade-right-enter-active,
.fade-right-leave-active
{
  transition: all 0.5s;
}
 
// 进入前和离开后为透明，并在右侧20px位置
.fade-right-enter-from,
.fade-right-leave-to{
  opacity: 0;
  transform: translateX(20px);
}

相关链接(78条消息) vue3进阶动画效果2-使用钩子函数_小小婷几的博客-CSDN博客_vue动画钩子函数