feat(projects): 增加主题切换过渡效果

This commit is contained in:
cc 2023-05-14 16:35:38 +08:00
parent f68285fbe5
commit 8da8843fd0
2 changed files with 47 additions and 4 deletions

View File

@ -70,5 +70,6 @@
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
}
},
"i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
}

View File

@ -34,9 +34,51 @@ const darkMode = computed({
}
});
function handleSwitch() {
darkMode.value = !darkMode.value;
function handleSwitch(event: MouseEvent) {
const x = event.clientX;
const y = event.clientY;
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
// @ts-expect-error: Transition API
if (!document.startViewTransition) {
darkMode.value = !darkMode.value;
return;
}
// @ts-expect-error: Transition API
const transition = document.startViewTransition(() => {
darkMode.value = !darkMode.value;
});
transition.ready.then(() => {
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
document.documentElement.animate(
{
clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
},
{
duration: 300,
easing: 'ease-in',
pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
}
);
});
}
</script>
<style scoped></style>
<style>
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 9999;
}
::view-transition-new(root) {
z-index: 1;
}
.dark::view-transition-old(root) {
z-index: 1;
}
.dark::view-transition-new(root) {
z-index: 9999;
}
</style>