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

1、主要实现代码

// 切换主题
const toggleTheme = () => {isDark.value = !isDark.value;localStorage.setItem('isDark', isDark.value);// 获取过渡动画起始坐标const clientX = !isDark.value ? 0 : document.documentElement.clientWidthconst clientY = !isDark.value ? document.documentElement.clientHeight : 0const 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;
}