feat(projects): 增加主题切换过渡效果
This commit is contained in:
parent
f68285fbe5
commit
8da8843fd0
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -70,5 +70,6 @@
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "Vue.volar"
|
||||
}
|
||||
},
|
||||
"i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user