vue实现页面切换效果

Vue 实现页面切换效果的方法

使用 Vue Router 过渡动画

Vue Router 内置支持过渡效果，可通过 <transition> 组件实现页面切换动画。在路由出口外包裹 <transition> 并定义动画样式。

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

CSS 动画示例：

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

动态过渡效果

根据路由变化动态设置过渡名称，实现不同页面间的差异化动画效果。

<transition :name="transitionName">
  <router-view></router-view>
</transition>

watch: {
  '$route' (to, from) {
    this.transitionName = to.meta.transition || 'fade'
  }
}

使用第三方动画库

引入动画库如 Animate.css，快速实现丰富动画效果。

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <router-view></router-view>
</transition>

页面滑动效果

通过 CSS transform 实现横向滑动切换效果。

.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s ease;
}
.slide-enter {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(-100%);
}

路由钩子控制动画

在路由守卫中控制动画执行时机，确保数据加载完成后再触发过渡。

router.beforeEach((to, from, next) => {
  store.commit('setLoading', true)
  next()
})

组件状态保持

使用 <keep-alive> 缓存组件状态，避免重复渲染影响动画流畅性。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>