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