你是否厌倦了vue应用里页面切换时生硬的“闪现”？用户仿佛被瞬间传送到另一个空间，毫无过渡感？流畅自然的过渡效果，正是提升应用质感与用户体验的关键一步。借助Vue强大的内置<transition>组件和vue-router，只需几步，就能让页面“优雅入场”，告别生硬跳转！

1. 与 vue-router的完美配合

Vue的核心动画能力来源于<transition>组件。当它与vue-router结合，包裹<router-view>时，就能在路由切换的进入和离开两个关键时刻施展魔法：

<template>
  <div id="app">
    <!-- 使用 transition 包裹 router-view，并命名 -->
    <router-view v-slot="{ Component }">
      <transition name="fade-slide" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

• name="fade-slide"：定义动画类名前缀（如.fade-slide-enter-active）。

• mode="out-in"：确保当前页面先完成离开动画，新页面再进入，避免重叠。in-out则顺序相反。

2. 定义动画

Vue的过渡动画主要依靠css定义。基于上面定义的name="fade-slide"，我们编写对应的CSS类：

/* 定义进入前和离开后的状态 */
.fade-slide-enter-from,
.fade-slide-leave-to {
  opacity: 0; /* 完全透明 */
  transform: translateX(20px); /* 从右侧20px位置进入 */
}

/* 定义进入和离开过程中的活动状态 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s ease; /* 所有属性变化，时长0.4秒，缓动效果 */
}

/* 定义进入完成和离开开始的状态 */
.fade-slide-enter-to,
.fade-slide-leave-from {
  opacity: 1; /* 完全不透明 */
  transform: translateX(0); /* 回到正常位置 */
}

这段CSS实现了：

1. 新页面进入：从右侧20px且透明，滑动并渐变到正常位置。

2. 旧页面离开：从正常位置滑动到左侧20px并逐渐消失。

3. 进阶技巧：解决滚动位置问题

页面跳转时，用户可能滚动到了某个位置。默认情况下，新页面会从顶部开始。使用Vue Router的scrollBehavior可以轻松保持或控制滚动位置：

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // 如果有保存的位置（如浏览器后退/前进），则恢复
    if (savedPosition) {
      return savedPosition;
    }
    // 否则，滚动到顶部
    return { top: 0, behavior: 'smooth' }; // 添加平滑滚动效果
  },
});

4. 性能优化

复杂的动画可能影响性能。使用will-change提示浏览器提前优化：

.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all 0.4s ease;
  will-change: opacity, transform; /* 提示浏览器提前准备 */
}

对于包含大量组件或复杂布局的页面，确保离开的组件使用v-if而非v-show，使其真正从dom中移除，减少渲染负担。

5. 场景拓展

掌握了核心原理，就能玩转更多效果：

• 缩放淡入淡出： 修改transform: scale(0.95);。

• 个性化路由动画： 在路由元信息meta中定义动画名，动态绑定<transition :name="route.meta.transitionName">。

• 结合Animate.css： 直接使用enter-active-等类名，快速引入丰富动画库。

动手实践

1. 确保项目已安装vue-router。

2. 在根组件（如App.vue）用<transition>包裹<router-view>。

3. 编写你的CSS过渡/动画类。

4. （可选）配置scrollBehavior优化滚动体验。

5. 运行应用，感受丝滑的页面切换！

总结

Vue的页面切换动画并非炫技，而是提升用户体验的必要手段。只需几行核心代码，就能显著降低应用的“廉价感”，让导航过程清晰、自然、愉悦。从简单的淡入淡出、滑动效果入手，逐步尝试更复杂的组合动画，你的Vue应用将立刻焕发新的生机！别再让用户忍受生硬的跳转了，今天就为你的页面切换加上流畅动画吧！

链接: https://fly63.com/article/detial/12743