当前位置：首页 > VUE

vue实现切换路由动画

2026-02-21 21:59:06VUE

实现路由切换动画的基本方法

在Vue中实现路由切换动画通常结合<transition>组件和Vue Router完成。以下是一个基础实现示例：

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

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

动态路由过渡效果

可以根据不同路由设置不同的过渡效果：

<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.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s;
}
.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter {
  transform: translateX(-100%);
}
.slide-right-leave-to {
  transform: translateX(100%);
}
</style>

使用CSS动画库

结合Animate.css等CSS动画库可以快速实现丰富效果：

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

<script>
import 'animate.css'
</script>

基于路由元信息的动画控制

通过路由配置中的meta字段控制不同路由的动画：

// router.js
{
  path: '/home',
  component: Home,
  meta: {
    transition: 'zoom'
  }
}

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

实现3D翻转动画

创建更复杂的3D过渡效果：

vue实现切换路由动画

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

<style>
.flip-enter-active {
  animation: flip-in 0.5s ease-out;
}
.flip-leave-active {
  animation: flip-out 0.5s ease-out;
}
@keyframes flip-in {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}
@keyframes flip-out {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(90deg);
    opacity: 0;
  }
}
</style>