1
function supportTransitions() {
2
  return (
3
    'startViewTransition' in document &&
4
    window.matchMedia('(prefers-reduced-motion: no-preference)').matches
5
  )
6
}

1
async function toggleTransition({ clientX: x, clientY: y }: MouseEvent) {
2
  // 判断是否支持动画
3
  if (!supportTransitions()) {
4
    themeStore.toggleColorScheme()
5
    return
6
  }
7
  // 计算圆的路径
8
  const clipPath = [
9
    `circle(0px at ${x}px ${y}px)`,
10
    `circle(${Math.hypot(
11
      Math.max(x, innerWidth - x),
12
      Math.max(y, innerHeight - y),
13
    )}px at ${x}px ${y}px)`,
14
  ]
15
  // View Transition回调
16
  await document.startViewTransition(async () => {
17
    themeStore.toggleColorScheme()
18
    await nextTick()
19
  }).ready
20
  // 动画实现
21
  document.documentElement.animate(
22
    { clipPath: themeStore.darkMode ? clipPath.reverse() : clipPath },
23
    {
24
      duration: 300,
25
      easing: 'cubic-bezier(.4, 0, .2, 1)',
26
      // 这行配置说明在动画结束之后保留元素，防止视图闪烁
27
      // https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill
28
      fill: 'both',
29
      pseudoElement: `::view-transition-${themeStore.darkMode ? 'old' : 'new'}(root)`,
30
    },
31
  )
32
}

1
::view-transition-old(root),
2
::view-transition-new(root) {
3
  animation: none;
4
  mix-blend-mode: normal;
5
}
6

7
::view-transition-old(root),
8
.dark::view-transition-new(root) {
9
  z-index: 9998;
10
}
11

12
::view-transition-new(root),
13
.dark::view-transition-old(root) {
14
  z-index: 9999;
15
}