当前位置：首页 > VUE

vue实现路由动画

2026-02-17 02:24:03VUE

Vue 实现路由动画的方法

在 Vue 中实现路由动画通常结合 Vue Router 和 Vue 的过渡系统（<transition> 组件）。以下是具体实现方式：

使用 `<transition>` 包裹 `<router-view>`

在 Vue 的模板中，用 <transition> 组件包裹 <router-view>，并设置过渡效果的名称（如 fade）。CSS 中定义对应的过渡样式。

vue实现路由动画

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

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

动态过渡效果

通过监听路由变化，动态设置过渡效果的名称。例如，根据路由元信息（meta）中的字段决定动画类型。

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

<template>
  <div id="app">
    <transition :name="$route.meta.transition || 'fade'">
      <router-view></router-view>
    </transition>
  </div>
</template>

结合 Animate.css 库

使用第三方动画库（如 Animate.css）可以快速实现丰富的动画效果。通过 <transition> 的 enter-active-class 和 leave-active-class 属性指定类名。

vue实现路由动画

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

路由钩子与动画控制

在路由导航守卫中控制动画的触发时机，例如在 beforeRouteEnter 或 beforeRouteLeave 中设置动画状态。

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$data.animateIn = true;
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$data.animateOut = true;
    setTimeout(next, 500); // 等待动画完成
  }
};

基于组件状态的动画

在组件内部通过数据驱动动画，例如结合 Vue 的响应式数据和 CSS 过渡。

<template>
  <div class="page" :class="{ 'page-slide-in': isEntering }">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return { isEntering: false };
  },
  mounted() {
    this.isEntering = true;
  }
};
</script>

<style>
.page {
  transition: transform 0.3s ease;
}
.page-slide-in {
  transform: translateX(0);
}
</style>