Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

StackedRouter: add default open animation

Browse source
This commit is contained in:
thislight 2024-11-16 21:50:18 +08:00
parent 0710aaf4f3
commit 9dfcfa3868
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/platform/StackedRouter.tsx
View file

@ -15,7 +15,7 @@ import {
import { createStore, unwrap } from "solid-js/store";
import { insert, render } from "solid-js/web";
import "./StackedRouter.css";
import { animateSlideInFromRight } from "./anim";
import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "../material/theme";
export type StackedRouterProps = Omit<RouterProps, "url">;
@ -102,6 +102,32 @@ function onDialogClick(
}
}
function animateClose(element: HTMLElement) {
if (window.innerWidth <= 560) {
return animateSlideOutToRight(element, { easing: ANIM_CURVE_DECELERATION });
} else {
return element.animate(
{
opacity: [0.5, 0],
},
{ easing: ANIM_CURVE_STD, duration: 220 },
);
}
}
function animateOpen(element: HTMLElement) {
if (window.innerWidth <= 560) {
animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
} else {
element.animate(
{
opacity: [0.5, 1],
},
{ easing: ANIM_CURVE_STD, duration: 220 },
);
}
}
/**
* The router that stacks the pages.
*/
@ -130,12 +156,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
const lastFrame = stack[stack.length - 1];
const element = document.getElementById(lastFrame.rootId)!;
requestAnimationFrame(() => {
const animation = element.animate(
{
opacity: [0.5, 0],
},
{ easing: ANIM_CURVE_STD, duration: 220 },
);
const animation = animateClose(element);
animation.addEventListener("finish", () =>
mutStack((o) => o.toSpliced(o.length - depth, depth)),
);
@ -162,16 +183,7 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
createEffect(() => {
requestAnimationFrame(() => {
element.showModal();
if (window.innerWidth <= 560) {
animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
} else {
element.animate(
{
opacity: [0.5, 1],
},
{ easing: ANIM_CURVE_STD, duration: 220 },
);
}
animateOpen(element);
});
});
};