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

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

@ -34,21 +34,25 @@ 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(() => {
await transition.ready;
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]; const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
document.documentElement.animate( document.documentElement.animate(
{ {
clipPath: darkMode.value ? clipPath : [...clipPath].reverse() clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
@ -59,7 +63,6 @@ function handleSwitch(event: MouseEvent) {
pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)' 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 {
/** /**