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 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 endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
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)'
}
);
});
await transition.ready;
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>

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

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