vue3实现路由切换页面动画之transition遇到的坑

2023-02-10 22:55:14

利用 Vue3 + Vue-Router4 实现流畅的路由切换动画

在前端开发中，流畅的页面动画可以显著提升用户体验。本文将深入探讨如何使用 Vue3 和 Vue-Router4 实现优雅的路由切换动画，解决常见的陷阱和挑战。

问题 1：Transition 无法生效

尝试实施动画时，你可能会遇到 Transition 无法发挥作用的情况。这是因为 Transition 必须直接应用于要执行动画的元素，而不是它的父元素。

解决方案：

<!-- 错误示例 -->
<div id="app">
  <transition>
    <router-view />
  </transition>
</div>

<!-- 正确示例 -->
<div id="app">
  <router-view :transition="fade" />
</div>

问题 2：动画效果不尽如人意

即使 Transition 已正确使用，动画效果仍可能不符合预期。这是因为 Transition 具有许多可配置的属性，包括 name、mode、appear、enter 和 leave。根据你的具体需求定制这些属性至关重要。

解决方案：

<router-view :transition="{
  name: 'fade',
  mode: 'out-in',
  appear: true,
  enter: 'fade-in',
  leave: 'fade-out'
}" />

问题 3：动画冲突

当与其他组件结合使用时，Transition 可能会与它们产生冲突。这是因为它影响整个页面的布局，因此需要谨慎使用。通过设置 Transition 的 CSS 属性，可以避免这种冲突。

解决方案：

.fade-in {
  animation: fade-in 0.5s ease-in-out;
}

.fade-out {
  animation: fade-out 0.5s ease-in-out;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}