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