vue实现路由动画

路由动画的实现方法

在Vue中实现路由动画通常结合<transition>组件和Vue Router的导航守卫。以下是几种常见实现方式：

基础过渡动画

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

这种方式适用于简单的淡入淡出效果，通过CSS过渡属性控制动画。

滑动过渡效果

.slide-enter-active {
  transition: all 0.3s ease-out;
}

.slide-leave-active {
  transition: all 0.3s ease-in;
}

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

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

结合transform属性实现页面滑动效果，需注意设置mode="out-in"避免同时执行进出动画。

动态路由过渡

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

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

通过路由元信息(meta)中的index值判断页面层级，实现前进后退不同方向的滑动动画。

使用Animate.css库

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

引入第三方动画库可以快速实现丰富效果，需先安装animate.css并导入样式。

注意事项

1. 始终为<transition>组件设置mode属性，常用out-in模式避免新旧内容重叠
2. 复杂动画建议使用requestAnimationFrame优化性能
3. 移动端注意硬件加速，可添加will-change: transform提升流畅度
4. 路由守卫中处理异步组件加载状态时，动画可能需要额外处理

通过合理组合这些技术，可以创建出符合项目需求的平滑路由过渡效果。