xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-23 20:06:37 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf(projects): add type declaration for document startViewTransition

Browse Source
This commit is contained in:
Soybean 2023-06-20 22:07:21 +08:00
parent cbda4a38a3
commit d3ebe95076
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/common/dark-mode-switch.vue
View File

@ -34,32 +34,35 @@ const darkMode = computed({
} }
}); });
function handleSwitch(event: MouseEvent) { async function handleSwitch(event: MouseEvent) {
const x = event.clientX; const x = event.clientX;
const y = event.clientY; 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) { if (!document.startViewTransition) {
darkMode.value = !darkMode.value; darkMode.value = !darkMode.value;
return; return;
} }
// @ts-expect-error: Transition API
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
const transition = document.startViewTransition(() => { const transition = document.startViewTransition(() => {
darkMode.value = !darkMode.value; darkMode.value = !darkMode.value;
}); });
transition.ready.then(() => {
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]; await transition.ready;
document.documentElement.animate(
{ const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
}, document.documentElement.animate(
{ {
duration: 300, clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
easing: 'ease-in', },
pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)' {
} duration: 300,
); easing: 'ease-in',
}); pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
}
);
} }
</script> </script>

8
src/typings/global.d.ts vendored
View File

@ -5,6 +5,14 @@ interface Window {
$notification?: import('naive-ui').NotificationProviderInst; $notification?: import('naive-ui').NotificationProviderInst;
} }
interface ViewTransition {
ready: Promise<void>;
}
interface Document {
startViewTransition?: (callback: () => Promise<void> | void) => ViewTransition;
}
/** 通用类型 */ /** 通用类型 */
declare namespace Common { declare namespace Common {
/** /**