From c5ff4bfc4f3240f2224cc24bf99ff37ab23e027d Mon Sep 17 00:00:00 2001 From: Super Manito <68613938+SuperManito@users.noreply.github.com> Date: Wed, 9 Apr 2025 02:59:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/assets/js/component.js | 11 ---- docs/assets/js/useThemeTransition.js | 90 ++++++++++++++++++++++++++++ docs/stylesheets/extra.css | 17 +++--- docs/theme/partials/palette.html | 89 --------------------------- mkdocs.yml | 2 + 5 files changed, 99 insertions(+), 110 deletions(-) create mode 100644 docs/assets/js/useThemeTransition.js delete mode 100644 docs/theme/partials/palette.html diff --git a/docs/assets/js/component.js b/docs/assets/js/component.js index 0ca4a57..3c56381 100644 --- a/docs/assets/js/component.js +++ b/docs/assets/js/component.js @@ -1,15 +1,4 @@ // 使用 mkdocs-material 与第三方 JavaScript 库集成的方法 document$.subscribe(function () { - // 重新初始化组件 ComponentSystem.reinitializeAll() - // 延迟初始化以确保DOM完全渲染 - setTimeout(() => { - ComponentSystem.initAll() - }, 300) -}) - -// 首次加载事件 -window.addEventListener('load', function () { - // 初始化所有组件 - ComponentSystem.initAll() }) diff --git a/docs/assets/js/useThemeTransition.js b/docs/assets/js/useThemeTransition.js new file mode 100644 index 0000000..59cb8f2 --- /dev/null +++ b/docs/assets/js/useThemeTransition.js @@ -0,0 +1,90 @@ +function useThemeTransition() { + // 更新过渡样式变量 + function updateViewTransitionVariables(isDarkTheme) { + document.documentElement.style.setProperty('--view-transition-z-index-foreground', isDarkTheme ? '999' : '1') + document.documentElement.style.setProperty('--view-transition-z-index-background', isDarkTheme ? '1' : '999') + } + // 切换主题按钮点击事件 + function handleThemeToggle(e) { + // 阻止默认点击事件 + e.preventDefault() + e.stopPropagation() + // 获取目标输入元素 + const targetId = this.getAttribute('for') + const targetInput = document.getElementById(targetId) + if (!targetInput) return + // 获取主题状态 + const targetTheme = targetInput.getAttribute('data-md-color-scheme') // 目标主题（system、default、slate） + const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'slate' : 'default' // 系统主题（default、slate） + const currentScheme = document.body.getAttribute('data-md-color-scheme') // 当前主题（default、slate） + // 当目标主题与当前主题相同时不触发动画 + if (targetTheme === 'system') { + if (systemTheme === currentScheme) { + targetInput.click() + return + } + } else if (targetTheme === currentScheme) { + targetInput.click() + return + } + // 当前主题状态 + const isSystemDarkTheme = systemTheme === 'slate' // 系统是否为深色主题 + const isCurrentDarkTheme = currentScheme.includes('slate') // 当前是否为深色主题 + const isSwitchToDarkTheme = !isCurrentDarkTheme // 是否将切换到深色主题 + // 根据系统主题设置动画样式 + updateViewTransitionVariables(isSystemDarkTheme) + // 判断切换方向是否与系统主题一致 + // 如果系统是深色，切换到深色是"靠近系统"；如果系统是浅色，切换到浅色是"靠近系统" + const isMovingTowardsSystemTheme = (isSwitchToDarkTheme && isSystemDarkTheme) || (!isSwitchToDarkTheme && !isSystemDarkTheme) + // 动画参数 + const x = e.clientX + const y = e.clientY + const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)) + const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`] + // 启动视图过渡 + document + .startViewTransition(async () => { + // 切换主题 + targetInput.click() + // 添加CSS类用于动画控制 + document.documentElement.classList.remove(isSwitchToDarkTheme ? 'light' : 'dark') + document.documentElement.classList.add(isSwitchToDarkTheme ? 'dark' : 'light') + // 等待主题变化完成 + await new Promise((resolve) => setTimeout(resolve, 100)) + }) + .ready.then(() => { + // 当朝向系统主题方向变化时使用使用缩小效果（reversed clipPath），反之放大效果（clipPath） + document.documentElement.animate( + { + clipPath: isMovingTowardsSystemTheme ? [...clipPath].reverse() : clipPath, + transform: 'translateZ(0)', + }, + { + duration: 500, + easing: 'ease-in', + pseudoElement: isMovingTowardsSystemTheme ? '::view-transition-old(root)' : '::view-transition-new(root)', + } + ) + }) + } + + // 不支持此特性 + if (typeof document.startViewTransition !== 'function') { + return + } + // 获取主题切换按钮Dom + const themeToggles = document.querySelectorAll('form[data-md-component="palette"] .md-header__button.md-icon') + themeToggles.forEach((toggle) => { + toggle.addEventListener('click', handleThemeToggle, { capture: true }) + }) + // 初始化主题状态类 + const currentScheme = document.body.getAttribute('data-md-color-scheme') + const isDark = currentScheme.includes('slate') + document.documentElement.classList.add(isDark ? 'dark' : 'light') + // 初始化过渡样式变量 + updateViewTransitionVariables(isDark) +} + +document.addEventListener('DOMContentLoaded', function () { + useThemeTransition() +}) diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css index 1a8ee8a..0172917 100644 --- a/docs/stylesheets/extra.css +++ b/docs/stylesheets/extra.css @@ -4,6 +4,8 @@ --md-primary-fg-color--light: hsl(0, 0%, 100%, 0.33); --md-default-bg-color--light: #ffffff; --md-default-bg-color--dark: hsla(var(--md-hue), 15%, 14%, 1); + --view-transition-z-index-foreground: 999; + --view-transition-z-index-background: 1; } [data-md-color-primary=white] { @@ -237,20 +239,15 @@ animation: none; mix-blend-mode: normal; } - .dark::view-transition-old(root) { - z-index: 999; + z-index: var(--view-transition-z-index-foreground); } - .dark::view-transition-new(root) { - z-index: 1; + z-index: var(--view-transition-z-index-background); } - -/* 浅色主题下的设置 */ ::view-transition-old(root) { - z-index: 1; + z-index: var(--view-transition-z-index-background) } - ::view-transition-new(root) { - z-index: 999; -} \ No newline at end of file + z-index: var(--view-transition-z-index-foreground); +} diff --git a/docs/theme/partials/palette.html b/docs/theme/partials/palette.html deleted file mode 100644 index f9ed6ad..0000000 --- a/docs/theme/partials/palette.html +++ /dev/null @@ -1,89 +0,0 @@ -
- {% for option in config.theme.palette %} {% set scheme = option.scheme | d("default", true) %} {% set primary = option.primary | d("indigo", true) %} {% set accent = option.accent | d("indigo", true) %} - - {% if option.toggle %} - - {% endif %} {% endfor %} -
- diff --git a/mkdocs.yml b/mkdocs.yml index 7ff31de..eb6d877 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -8,6 +8,7 @@ extra_javascript: - assets/js/modules/vue.global.prod.js - assets/js/modules/tdesign.min.js - assets/js/modules/tdesign-theme.js + - assets/js/useThemeTransition.js - assets/js/common.js - assets/js/component.js - assets/js/components/mirrors-table/data.js @@ -157,6 +158,7 @@ plugins: remove_comments: true cache_safe: true js_files: + - assets/js/useThemeTransition.js - assets/js/common.js - assets/js/component.js - assets/js/components/mirrors-table/data.js