startViewTransition使用及踩坑

startViewTransition是一个较新的api 
 

const transition = document.startViewTransition(() => {
    themeStore.toggleDark();
  });
  const x = e.clientX;
  const y = e.clientY;
  // 从点击点到窗口最远边缘的距离，这个距离即为圆的半径，用于确定一个圆形裁剪路径
  const radius = Math.sqrt(
    Math.max(x, window.innerWidth - x) ** 2 + Math.max(y, window.innerHeight - y) ** 2
  );
  // transition.ready：一个在伪元素树创建且过渡动画即将开始时兑现的 Promise
 
    transition.ready.then(() => {
      // 实现过渡的过程 circle
      document.documentElement.animate(
        {
          clipPath: [
            `circle(0 at ${x}px ${y}px)`,
            `circle(${radius}px at ${x}px ${y}px)`,
          ],
        },
        {
          duration: 15000,
          // 方向 这里反转有一点问题
          direction: !themeStore.themeColor.includes('dark') ? 'reverse' : 'normal',
          pseudoElement: "::view-transition-new(root)",
        }
      );
    });

其中startViewTransition相当于我们css中的过渡（视图过渡）
有了上面的代码就可以成功的完成这样

怎么看都不对 为什么不是那种炫酷的

接下来就需要一个css

:view-transition-old(root),
::view-transition-new(root) {
    /* 这行代码禁用了默认的过渡动画 */
    animation: none;
    /* 设置了元素的混合模式为"正常" */
    mix-blend-mode: normal;
}

属性控制元素与其背景之间的混合效果。正常模式意味着元素会直接覆盖在其背景上，不会发生任何混合效果。这确保了视图过渡过程中，旧视图和新视图能够清晰地显示而不受背景混合的影响
然后就可以了

这样就不会被遮挡了

当然还有很多用处 我只是采用了我需要的 

更多看这位博主：https://juejin.cn/post/7397622646630793225
简单易懂
还有博主推荐的：https://github.com/antfu/vue-starport?tab=readme-ov-file
用于浏览器版本低的