vue路由实现滑动

路由切换滑动动画实现

在Vue中实现路由切换时的滑动动画，可以通过Vue的过渡系统结合CSS动画或第三方库完成。以下是几种常见方法：

使用Vue过渡 + CSS动画

1. 包裹<router-view> 在App.vue中用<transition>包裹<router-view>并设置name属性：

<transition name="slide">
  <router-view></router-view>
</transition>

1. 定义CSS过渡样式 添加滑动效果的CSS样式：

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

实现左右滑动区分

通过路由元信息判断前进/后退方向，动态应用不同动画：

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

watch: {
  '$route'(to, from) {
    const toDepth = to.meta.index || 0
    const fromDepth = from.meta.index || 0
    this.transitionName = toDepth > fromDepth ? 'slide-left' : 'slide-right'
  }
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

使用第三方动画库

1. 安装animate.css

   

   npm install animate.css

2. 配置路由过渡

   <transition
   enter-active-class="animate__animated animate__slideInRight"
   leave-active-class="animate__animated animate__slideOutLeft"
   >
   <router-view></router-view>
   </transition>

注意事项

• 确保路由组件有唯一的key属性，避免复用组件导致的动画失效：

  

  <router-view v-slot="{ Component }">
  <transition name="slide">
    <component :is="Component" :key="$route.path" />
  </transition>
  </router-view>

• 滑动方向判断逻辑可根据实际路由结构调整，例如使用路由历史长度或自定义meta字段。

• 移动端项目建议添加overflow-x: hidden到父容器，防止横向滚动条闪现。

以上方法可根据项目需求选择或组合使用，CSS方案性能更优，而动画库提供更多预设效果。