diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
index c5a9d818..d89793f5 100644
--- a/docs/notes/theme/config/主题配置.md
+++ b/docs/notes/theme/config/主题配置.md
@@ -366,6 +366,38 @@ type NavItem = string | {
每个页面可以通过 [frontmatter outline](./frontmatter/basic.md#outline) 覆盖层级配置。
+### transition
+
+- 类型: `boolean | ThemeTransition`
+- 默认值: `true`
+- 详情:
+
+ 是否启用过渡动画。
+
+ 传入 `boolean` 类型时,`true` 代表启用,`false` 代表禁用。
+
+ 也可以传入一个对象,具体配置见下
+
+ ```ts
+ interface ThemeTransition {
+ /**
+ * 是否启用 页面间跳转过渡动画
+ * @default true
+ */
+ page?: boolean
+ /**
+ * 是否启用 博客文章列表过渡动画
+ * @default true
+ */
+ postList?: boolean
+ /**
+ * 是否启用 深色/浅色 模式切换过渡动画
+ * @default true
+ */
+ appearance?: boolean
+ }
+ ```
+
### selectLanguageName
- 类型: `string`
diff --git a/theme/src/client/components/VPTransitionDrop.vue b/theme/src/client/components/VPTransitionDrop.vue
index 414cb33e..a4d53ac8 100644
--- a/theme/src/client/components/VPTransitionDrop.vue
+++ b/theme/src/client/components/VPTransitionDrop.vue
@@ -1,4 +1,7 @@
+
diff --git a/theme/src/client/composables/dark-mode.ts b/theme/src/client/composables/dark-mode.ts
index d5664dc7..a087194f 100644
--- a/theme/src/client/composables/dark-mode.ts
+++ b/theme/src/client/composables/dark-mode.ts
@@ -10,16 +10,21 @@ export const darkModeSymbol: InjectionKey = Symbol(
)
export function setupDarkMode(app: App): void {
- const themeLocale = useThemeData()
+ const theme = useThemeData()
- const appearance = themeLocale.value.appearance
+ const transition = theme.value.transition
+ const disableTransition = typeof transition === 'object'
+ ? transition.appearance === false
+ : transition === false
+
+ const appearance = theme.value.appearance
const isDark
= appearance === 'force-dark'
? ref(true)
: appearance
? useDark({
storageKey: 'vuepress-theme-appearance',
- disableTransition: false,
+ disableTransition,
initialValue: () =>
typeof appearance === 'string' ? appearance : 'auto',
...(typeof appearance === 'object' ? appearance : {}),
diff --git a/theme/src/client/styles/utils.css b/theme/src/client/styles/utils.css
index 0d74fe3a..b2d791ea 100644
--- a/theme/src/client/styles/utils.css
+++ b/theme/src/client/styles/utils.css
@@ -18,11 +18,13 @@
/* ----------------- Transition ------------------------ */
.fade-slide-y-enter-active {
- transition: all 0.25s ease !important;
+ transition: 0.25s ease !important;
+ transition-property: opacity, transform;
}
.fade-slide-y-leave-active {
- transition: all 0.25s cubic-bezier(0, 1, 0.3, 1) !important;
+ transition: 0.25s cubic-bezier(0, 1, 0.3, 1) !important;
+ transition-property: opacity, transform;
}
.fade-slide-y-enter-from,
@@ -32,11 +34,13 @@
}
.fade-slide-x-enter-active {
- transition: all 0.25s ease !important;
+ transition: 0.25s ease !important;
+ transition-property: opacity, transform;
}
.fade-slide-x-leave-active {
- transition: all 0.25s cubic-bezier(0, 1, 0.3, 1) !important;
+ transition: 0.25s cubic-bezier(0, 1, 0.3, 1) !important;
+ transition-property: opacity, transform;
}
.fade-slide-x-enter-from,
diff --git a/theme/src/shared/base.ts b/theme/src/shared/base.ts
index b7e185ad..6b9bf943 100644
--- a/theme/src/shared/base.ts
+++ b/theme/src/shared/base.ts
@@ -45,3 +45,21 @@ export interface PresetLocale {
tag: string
archive: string
}
+
+export interface ThemeTransition {
+ /**
+ * 是否启用 页面间跳转过渡动画
+ * @default true
+ */
+ page?: boolean
+ /**
+ * 是否启用 博客文章列表过渡动画
+ * @default true
+ */
+ postList?: boolean
+ /**
+ * 是否启用 深色/浅色 模式切换过渡动画
+ * @default true
+ */
+ appearance?: boolean
+}
diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts
index 99081b7f..167f880a 100644
--- a/theme/src/shared/options/locale.ts
+++ b/theme/src/shared/options/locale.ts
@@ -1,6 +1,6 @@
import type { LocaleData } from 'vuepress/core'
import type { NotesDataOptions } from '@vuepress-plume/plugin-notes-data'
-import type { SocialLink, SocialLinkIconUnion, ThemeOutline } from '../base.js'
+import type { SocialLink, SocialLinkIconUnion, ThemeOutline, ThemeTransition } from '../base.js'
import type { PlumeThemeBlog } from '../blog.js'
import type { NavItem } from '../navbar.js'
@@ -103,6 +103,13 @@ export interface PlumeThemeLocaleData extends LocaleData {
*/
aside?: boolean | 'left'
+ /**
+ * 是否启用过渡动画效果
+ *
+ * @default true
+ */
+ transition?: boolean | ThemeTransition
+
/**
* 选择语言菜单 的文本。
*/
@@ -119,9 +126,9 @@ export interface PlumeThemeLocaleData extends LocaleData {
selectLanguageName?: string
/**
- *
- *
* 是否显示 "编辑此页"
+ *
+ * @default true
*/
editLink?: boolean