如何在VuePress中关闭页面切换过渡动画？

方法一：通过主题配置直接关闭 #

你可以直接在主题配置文件（通常是.vuepress/config.ts或.vuepress/theme/config.ts）中添加对应配置项即可禁用全局切换动画：

import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    // 其他现有配置保持不变
    transition: {
      page: false,
      fade: false
    }
  })
})

如果是旧版本主题，若上述配置不生效，可尝试添加animation: false配置项：

export default defineUserConfig({
  theme: hopeTheme({
    animation: false
  })
})

方法二：CSS样式强制覆盖（兜底方案） #

如果配置项不生效，可以在.vuepress/styles/index.scss中添加如下样式，强制禁用所有页面切换过渡效果：

/* 禁用页面切换动画 */
.page-enter-active,
.page-leave-active,
.layout-enter-active,
.layout-leave-active {
  transition: none !important;
}

.page-enter-from,
.page-leave-to,
.layout-enter-from,
.layout-leave-to {
  opacity: 1 !important;
}

配置完成后重新启动本地开发服务或者重新打包即可生效。

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