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

1. 效果目标

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

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

2. 技术思路

核心是“三层组合”：

1. Theme Vars：主题仍然用 CSS 变量控制，保持可维护性。
2. View Transition：在切换瞬间做全局圆形揭幕，形成“高级感”。
3. 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

<div
  v-for="item in presetThemes"
  :key="item.key"
  class="theme-card"
  @click="selectPresetTheme(item, $event)"
/>

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. 可复用参数建议

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

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

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

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

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

6. 常见坑位

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

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

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

8. 本项目落地文件索引

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

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

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

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

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