Vue.js视图单向切换过渡耗时过长问题求助

在Vue应用中使用<Transition>实现路由切换的淡入淡出效果时，从带有25秒无限循环背景动画的MineSweeper视图切回主页，过渡时长被拉长至25秒，而非设置的1500ms。禁用背景动画后恢复正常。

问题根源 #

Vue的<Transition>组件默认会监听元素上所有CSS动画和过渡的结束事件。由于MineSweeper页面的背景动画是infinite无限循环的，永远不会触发animationend事件，导致Vue一直等待该动画完成，进而阻塞过渡流程，直到动画自然走完一个25秒周期。

可行解决方案 #

方案1：指定Transition仅监听过渡（推荐）

在<Transition>组件上添加type="transition"属性，明确告诉Vue只关注CSS过渡（即我们设置的opacity淡入淡出效果），忽略元素上的CSS动画：

<RouterView v-slot="{ Component }">
  <Transition name="fade" mode="out-in" type="transition">
    <component :is="Component" />
  </Transition>
</RouterView>

该方案无需修改MineSweeper组件代码，实现成本最低。

方案2：组件卸载时停止背景动画

在MineSweeper组件中，利用生命周期钩子在组件即将卸载时暂停或移除背景动画，让Vue能正确识别离开过渡的结束：

<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';

const bodyRef = ref<HTMLElement | null>(null);

onBeforeUnmount(() => {
  if (bodyRef.value) {
    // 暂停动画
    bodyRef.value.style.animationPlayState = 'paused';
    // 或直接移除动画样式
    // bodyRef.value.style.animation = 'none';
  }
});
</script>

<template>
  <div ref="bodyRef" class="body">
    <!-- 扫雷组件内容 -->
  </div>
</template>

方案3：修改CSS动画（不推荐，影响原有效果）

若允许改变背景动画的循环行为，可移除infinite并添加animation-fill-mode: forwards，让动画仅播放一次并停留在结束状态，但这会丢失循环效果：

.body {
  height: 95dvh;
  background: linear-gradient(-45deg, #692612, #860b3a, #092499, #0f965e);
  background-size: 400% 400%;
  animation: gradient 25s ease; /* 移除infinite */
  animation-fill-mode: forwards;
}

效果验证 #

应用任意一种方案后，从MineSweeper切回主页的过渡会严格按照设置的1500ms执行，同时保留背景动画的循环效果。

内容的提问来源于stack exchange，提问作者Alchemist4444