Vue页面主题切换时实现过渡动画

1、主要实现代码

// 切换主题
const toggleTheme = () => {
  isDark.value = !isDark.value;
  localStorage.setItem('isDark', isDark.value);

  // 获取过渡动画起始坐标
  const clientX = !isDark.value ? 0 : document.documentElement.clientWidth
  const clientY = !isDark.value ? document.documentElement.clientHeight : 0

  const transition = document.startViewTransition(() => {
    document.documentElement.classList.toggle('dark');
  })
  // 实现动画效果
  transition.ready.then(() => {
    // 计算半径，以鼠标点击的位置为圆心，到四个角的距离中最大的那个作为半径
    const radius = Math.hypot(
        Math.max(clientX, innerWidth - clientX),
        Math.max(clientY, innerHeight - clientY)
    )
    // 自定义动画
    document.documentElement.animate(
        {
          clipPath: [
            `circle(0% at ${clientX}px ${clientY}px)`,
            `circle(${radius}px at ${clientX}px ${clientY}px)`
          ]
        },
        {
          duration: 300,
          pseudoElement: '::view-transition-new(root)'
        }
    )
  })
}

2、禁用默认动画

::view-transition-new(root),
::view-transition-old(root){
  animation: none;
}