From fb7ec5e3b278bfa4d71938d572d2e599d85c9b4f Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 21 Jan 2025 18:42:47 +0300 Subject: [PATCH] Use fly-in animation --- src/app.html | 32 ++++++++++++ src/lib/animation/index.ts | 19 ------- src/lib/components/functional/Dropdown.svelte | 3 +- .../components/functional/FancyMenu.svelte | 8 +-- src/lib/components/functional/Navbar.svelte | 3 +- src/routes/+layout.svelte | 51 +++++++++---------- src/routes/convert/+page.svelte | 3 +- 7 files changed, 65 insertions(+), 54 deletions(-) diff --git a/src/app.html b/src/app.html index d5cc2e5..f0af328 100644 --- a/src/app.html +++ b/src/app.html @@ -7,6 +7,38 @@ %sveltekit.head% +
%sveltekit.body%
diff --git a/src/lib/animation/index.ts b/src/lib/animation/index.ts index a423a9d..c201fa9 100644 --- a/src/lib/animation/index.ts +++ b/src/lib/animation/index.ts @@ -6,25 +6,6 @@ export const transition = export const duration = 500; -interface FadeOptions { - delay?: number; - duration?: number; - easing?: (t: number) => number; - type?: "in" | "out"; -} - -export function fade( - node: HTMLElement, - { delay = 0, duration = 400, easing = cubicOut, type = "in" }: FadeOptions = {} -): AnimationConfig { - return { - delay, - duration, - easing, - css: (t) => `opacity: ${type === "in" ? t : 1 - t};`, - }; -} - // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type export function is_function(thing: unknown): thing is Function { return typeof thing === "function"; diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte index 515bdd4..57fec3a 100644 --- a/src/lib/components/functional/Dropdown.svelte +++ b/src/lib/components/functional/Dropdown.svelte @@ -1,8 +1,9 @@ {/if} -
-
@@ -167,12 +143,31 @@ {#key data.pathname}
-
+
{@render children()}
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte index a7abebc..62d9e74 100644 --- a/src/routes/convert/+page.svelte +++ b/src/routes/convert/+page.svelte @@ -1,5 +1,5 @@