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
用于浏览器版本低的