侧边栏主题切换高级动效实战（Vue2/Element UI 可复用版）

1. 效果目标

这套方案解决的是“主题切换僵硬”的常见问题，让用户点击主题色后看到更丝滑、更高级的视觉反馈：

支持点击位置触发的圆形揭幕动画（View Transition）。
不支持新 API 的浏览器自动降级，不会出现功能中断。
菜单背景、文字、图标、激活条、阴影统一过渡，避免割裂感。
可直接复用于任意“CSS 变量驱动主题”的后台项目。

2. 技术思路

核心是“三层组合”：

Theme Vars：主题仍然用 CSS 变量控制，保持可维护性。
View Transition：在切换瞬间做全局圆形揭幕，形成“高级感”。
Fallback：老浏览器走轻量扫光动画，保证兼容。

3. 最小接入步骤

步骤 A：主题工具层增加带动效的应用函数

参考项目文件：sidebar-theme.js

const SIDEBAR_THEME_TRANSITION_DURATION = 720

function getThemeTransitionOrigin(options = {}) {
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0
  const event = options.event

  if (event && typeof event.clientX === 'number' && typeof event.clientY === 'number') {
    return { x: event.clientX, y: event.clientY, viewportWidth, viewportHeight }
  }

  const sourceElement = options.sourceElement
  if (sourceElement && sourceElement.getBoundingClientRect) {
    const rect = sourceElement.getBoundingClientRect()
    return {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2,
      viewportWidth,
      viewportHeight
    }
  }

  const sidebar = document.querySelector('.sidebar-container')
  if (sidebar && sidebar.getBoundingClientRect) {
    const rect = sidebar.getBoundingClientRect()
    return {
      x: rect.left + rect.width,
      y: rect.top + 72,
      viewportWidth,
      viewportHeight
    }
  }

  return { x: viewportWidth / 2, y: viewportHeight / 2, viewportWidth, viewportHeight }
}

function setThemeTransitionVars(origin) {
  const root = document.documentElement
  const radius = Math.hypot(
    Math.max(origin.x, origin.viewportWidth - origin.x),
    Math.max(origin.y, origin.viewportHeight - origin.y)
  )
  root.style.setProperty('--sidebar-theme-transition-x', `${origin.x}px`)
  root.style.setProperty('--sidebar-theme-transition-y', `${origin.y}px`)
  root.style.setProperty('--sidebar-theme-transition-radius', `${Math.ceil(radius)}px`)
}

function cleanupThemeTransition() {
  const root = document.documentElement
  root.classList.remove('sidebar-theme-view-transition')
  window.clearTimeout(cleanupThemeTransition.timer)
  cleanupThemeTransition.timer = null
}

export function applySidebarThemeWithTransition(config, options = {}) {
  const normalized = normalizeSidebarThemeConfig(config)

  if (typeof document === 'undefined' || typeof window === 'undefined') {
    return applySidebarTheme(normalized)
  }

  const prefersReducedMotion = window.matchMedia &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches

  if (prefersReducedMotion || !document.startViewTransition) {
    document.body.classList.add('sidebar-theme-is-switching')
    const applied = applySidebarTheme(normalized)
    window.setTimeout(() => {
      document.body.classList.remove('sidebar-theme-is-switching')
    }, 360)
    return applied
  }

  cleanupThemeTransition()
  setThemeTransitionVars(getThemeTransitionOrigin(options))
  document.documentElement.classList.add('sidebar-theme-view-transition')

  let transition
  try {
    transition = document.startViewTransition(() => {
      applySidebarTheme(normalized)
    })
  } catch (e) {
    cleanupThemeTransition()
    return applySidebarTheme(normalized)
  }

  if (transition && transition.finished) {
    transition.finished.then(cleanupThemeTransition).catch(cleanupThemeTransition)
  } else {
    cleanupThemeTransition.timer = window.setTimeout(cleanupThemeTransition, SIDEBAR_THEME_TRANSITION_DURATION)
  }

  return normalized
}

步骤 B：全局样式层加入揭幕与降级动画

参考项目文件：sidebar.scss

html.sidebar-theme-view-transition::view-transition-old(root),
html.sidebar-theme-view-transition::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html.sidebar-theme-view-transition::view-transition-group(root) {
  animation-duration: 0.72s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html.sidebar-theme-view-transition::view-transition-new(root) {
  animation: sidebar-theme-reveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sidebar-theme-reveal {
  from {
    clip-path: circle(0 at var(--sidebar-theme-transition-x, 0px) var(--sidebar-theme-transition-y, 0px));
  }
  to {
    clip-path: circle(var(--sidebar-theme-transition-radius, 140vmax) at var(--sidebar-theme-transition-x, 0px) var(--sidebar-theme-transition-y, 0px));
  }
}

@keyframes sidebar-theme-soft-flash {
  0% { opacity: 0; transform: scaleX(0.92); }
  38% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.04); }
}

body.sidebar-theme-is-switching #app .sidebar-container::after {
  animation: sidebar-theme-soft-flash 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

步骤 C：业务页面点击事件改为“携带动画上下文”

参考项目文件：index.vue

import { applySidebarThemeWithTransition } from '@/utils/sidebar-theme'

selectPresetTheme(item, event) {
  this.applyTheme(
    { key: item.key, color: item.color },
    { animate: true, event }
  )
},

selectCustomTheme(event, animate = true) {
  this.applyTheme(
    { key: CUSTOM_SIDEBAR_THEME_KEY, color: this.customThemeColor },
    {
      animate,
      event,
      sourceElement: this.$refs.customThemePicker && this.$refs.customThemePicker.$el
    }
  )
},

applyTheme(theme, options = {}) {
  this.draftTheme = { key: theme.key, color: normalizeHexColor(theme.color) }
  if (options.animate) {
    applySidebarThemeWithTransition(this.draftTheme, options)
    return
  }
  applySidebarTheme(this.draftTheme)
}

4. 可复用参数建议

建议把以下参数抽成常量，方便在不同项目快速调优：

SIDEBAR_THEME_TRANSITION_DURATION：推荐 620~760ms。
cubic-bezier(0.16, 1, 0.3, 1)：推荐保留，节奏自然。
fallback 时长：推荐 300~420ms。
hover 位移：推荐 translateX(1px~3px)，不宜过大。

5. 浏览器兼容与降级策略

新浏览器：走 document.startViewTransition，展示圆形揭幕。
老浏览器：自动走 sidebar-theme-is-switching 扫光动画。
减弱动效用户：检测 prefers-reduced-motion: reduce 后禁用复杂动画。

这三步做完，功能可用性和体验一致性都能保证。

6. 常见坑位

只做背景过渡，不做图标/文字过渡：会造成“背景先变、内容后变”的撕裂感。
没有传点击坐标：揭幕圆会从固定点出现，交互质感明显下降。
只在主题页接入，不在统一主题函数接入：后续其他入口切换会漏动效。
直接覆盖整站大范围动画：可能影响弹窗、抽屉等组件，建议仅作用于主题切换 class。

7. 迁移到其他项目的检查清单

项目是否已用 CSS 变量承接主题色。
是否存在统一主题应用函数（建议单一出口）。
主题切换入口是否可拿到 event 或 sourceElement。
是否有 prefers-reduced-motion 的兜底。
是否在 QA 环境验证以下场景：
- 预设主题切换
- 自定义颜色切换
- 连续快速切换
- 页面跳转后回显
- 低版本浏览器降级

8. 本项目落地文件索引

主题运行时：src/utils/sidebar-theme.js
侧边栏全局样式：src/styles/sidebar.scss
个性化主题页：src/views/personality-module/index.vue

对应改造可直接作为你后续博客中的“完整示例工程结构”章节。

9. 博客发布建议结构（可直接套用）

背景：为什么后台系统主题切换常常“看起来廉价”。
目标：同等交互下让用户感知更顺滑。
方案：CSS 变量 + View Transition + Fallback。
实现：按本文第 3 节贴核心代码。
调优：展示 2~3 组不同时长/缓动对比图。
复用：给出迁移清单和注意事项。

这套结构对技术读者非常友好，既能讲清原理，也能让人一键接入。