vue实现切换路由动画

路由动画的基本实现

在Vue中实现路由切换动画，通常结合<transition>或<transition-group>组件与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.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

动态过渡效果

通过路由元信息（meta）动态控制动画效果：

// router.js
routes: [
  {
    path: '/',
    component: Home,
    meta: { transition: 'slide-left' }
  },
  {
    path: '/about',
    component: About,
    meta: { transition: 'slide-right' }
  }
]

<template>
  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

多层级路由动画

嵌套路由场景下，需确保每个层级都包含<router-view>和过渡组件：

<template>
  <router-view v-slot="{ Component }">
    <transition name="nested">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

基于CSS的动画库

整合第三方动画库如Animate.css：

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <component :is="Component" />
</transition>

JavaScript钩子动画

使用JavaScript控制复杂动画逻辑：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0
    el.style.transformOrigin = 'left'
  },
  enter(el, done) {
    gsap.to(el, {
      opacity: 1,
      x: 0,
      duration: 0.8,
      onComplete: done
    })
  }
}

滚动行为控制

在router配置中添加滚动行为控制，提升用户体验：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

过渡状态管理

通过Vuex或Pinia管理过渡状态，实现全局控制：

// store.js
state: {
  isLoading: false
}

// 路由守卫
router.beforeEach(() => {
  store.commit('SET_LOADING', true)
})
router.afterEach(() => {
  store.commit('SET_LOADING', false)
})

性能优化建议

避免使用性能开销大的属性如box-shadow，优先使用opacity和transform。对于移动端，考虑减少动画持续时间，通常200-300ms为宜。可通过will-change属性提示浏览器优化：

.animated-element {
  will-change: transform, opacity;
}