当前位置:

vue3进入页面实现动画效果

访客 2024-04-24 609 0

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

  • <RouterViewv-slot="{Component,route}"v-if="isRouterAlive">
  • <transitionname="fade"mode="out-in"@after-enter="handleAfterEnter">
  • <component:is="Component":key="handleDate()"/>
  • </transition>
  • </RouterView>
  • consthandleAfterEnter=()=>{
  • 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:all0.5s;
  • }
  • //进入前和离开后为透明,并在右侧20px位置
  • .fade-right-enter-from,
  • .fade-right-leave-to{
  • opacity:0;
  • transform:translateX(20px);
  • }
  • 发表评论

    • 评论列表
    还没有人评论,快来抢沙发吧~