当前位置：首页 > VUE

vue跳页面实现特效

2026-02-23 01:37:21VUE

在Vue中实现页面跳转时的过渡特效，可以通过路由过渡（Route Transitions）和动画库结合实现。以下是几种常见方法：

使用Vue内置过渡组件

Vue的<transition>组件可与路由结合，为页面跳转添加动画效果。需在路由视图外包裹过渡组件，并定义CSS过渡类名。

<transition name="fade" mode="out-in">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

动态过渡效果

通过路由元信息（meta）动态设置过渡效果名称，实现不同页面间的差异化动画。

// router.js
routes: [
  {
    path: '/page1',
    component: Page1,
    meta: { transition: 'slide-left' }
  },
  {
    path: '/page2',
    component: Page2,
    meta: { transition: 'slide-right' }
  }
]

<transition :name="$route.meta.transition || 'fade'">
  <router-view></router-view>
</transition>

结合Animate.css库

引入第三方动画库可快速实现丰富特效，需配合Vue过渡的enter-active-class和leave-active-class属性。

<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
  <router-view></router-view>
</transition>

页面滚动位置控制

跳转时保存滚动位置，返回时恢复。需在路由配置中启用scrollBehavior。

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

使用GSAP实现高级动画

对于复杂动画序列，可通过GSAP库在过渡钩子中编写精细的时间轴动画。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false"
>
  <router-view></router-view>
</transition>

methods: {
  beforeEnter(el) {
    gsap.set(el, { opacity: 0, x: 100 })
  },
  enter(el, done) {
    gsap.to(el, { 
      opacity: 1, 
      x: 0, 
      duration: 0.5,
      onComplete: done 
    })
  },
  leave(el, done) {
    gsap.to(el, { 
      opacity: 0, 
      x: -100, 
      duration: 0.5,
      onComplete: done 
    })
  }
}

实现时需注意：

vue跳页面实现特效