From df30781cdc7e72a1b06ec1947ea713711035a1d7 Mon Sep 17 00:00:00 2001 From: saicaca Date: Wed, 13 Mar 2024 01:32:54 +0800 Subject: [PATCH] fix: onload animation tweaks --- src/components/GlobalStyles.astro | 10 ++++++---- src/components/PostCard.astro | 5 +++-- src/components/PostPage.astro | 5 +++++ src/components/control/Pagination.astro | 5 +++-- src/components/widget/Categories.astro | 9 +++++++-- src/components/widget/SideBar.astro | 4 ++-- src/components/widget/Tags.astro | 9 ++++++++- src/components/widget/WidgetLayout.astro | 6 +++++- src/layouts/Layout.astro | 4 ++++ src/pages/[...page].astro | 4 +++- src/pages/posts/[...slug].astro | 12 ++++++------ 11 files changed, 52 insertions(+), 21 deletions(-) diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro index b9bce86..d16169c 100644 --- a/src/components/GlobalStyles.astro +++ b/src/components/GlobalStyles.astro @@ -52,6 +52,8 @@ rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30) --banner-height-home 60vh --banner-height 40vh + --content-delay 150ms + color_set({ --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue)) --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue)) @@ -257,20 +259,20 @@ color_set({ } .onload-animation { opacity: 0; - animation: 500ms fade-in-up; + animation: 300ms fade-in-up; animation-fill-mode: forwards; } #top-row { animation-delay: 0ms } #sidebar { - animation-delay: 150ms + animation-delay: 100ms } #content-wrapper { - animation-delay: 350ms; + animation-delay: var(--content-delay); } #footer { - animation-delay: 500ms; + animation-delay: 400ms; } diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index 2604a6e..974b084 100644 --- a/src/components/PostCard.astro +++ b/src/components/PostCard.astro @@ -19,8 +19,9 @@ interface Props { description: string; words: number; draft: boolean; + style: string; } -const { entry, title, url, published, tags, category, image, description, words } = Astro.props; +const { entry, title, url, published, tags, category, image, description, words, style } = Astro.props; const className = Astro.props.class; const hasCover = image !== undefined && image !== null && image !== ''; @@ -30,7 +31,7 @@ const coverWidth = "28%"; const { remarkPluginFrontmatter } = await entry.render(); --- -
+
{page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => { @@ -17,6 +20,8 @@ const {page} = Astro.props; image={entry.data.image} description={entry.data.description} draft={entry.data.draft} + class:list="onload-animation" + style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`} > ); })} diff --git a/src/components/control/Pagination.astro b/src/components/control/Pagination.astro index 252e9e5..a12afc5 100644 --- a/src/components/control/Pagination.astro +++ b/src/components/control/Pagination.astro @@ -4,9 +4,10 @@ import { Icon } from 'astro-icon/components'; interface Props { page: Page; class?: string; + style?: string; } -const {page} = Astro.props; +const {page, style} = Astro.props; const HIDDEN = -1; @@ -59,7 +60,7 @@ const getPageUrl = (p: number) => { --- -
+
- - + +
diff --git a/src/components/widget/Tags.astro b/src/components/widget/Tags.astro index 2bbcc49..5df18e3 100644 --- a/src/components/widget/Tags.astro +++ b/src/components/widget/Tags.astro @@ -12,8 +12,15 @@ const COLLAPSED_HEIGHT = "7.5rem"; const isCollapsed = tags.length >= 20; +interface Props { + class?: string; + style?: string; +} +const className = Astro.props.class +const style = Astro.props.style + --- - +
{tags.map(t => ( diff --git a/src/components/widget/WidgetLayout.astro b/src/components/widget/WidgetLayout.astro index bc78ee7..3d8e1a4 100644 --- a/src/components/widget/WidgetLayout.astro +++ b/src/components/widget/WidgetLayout.astro @@ -7,6 +7,8 @@ interface Props { name?: string; isCollapsed?: boolean; collapsedHeight?: string; + class?: string; + style?: string; } const props = Astro.props; const { @@ -14,10 +16,12 @@ const { name, isCollapsed, collapsedHeight, + style, } = Astro.props +const className = Astro.props.class --- - +
{name}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1c0a91f..4ceb1c9 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -287,6 +287,10 @@ const setup = () => { } }) */ + // Remove the delay for the first time page load + window.swup.hooks.on('link:click', () => { + document.documentElement.style.setProperty('--content-delay', '0ms') + }) } if (window.swup.hooks) { setup() diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro index 139cffb..d370537 100644 --- a/src/pages/[...page].astro +++ b/src/pages/[...page].astro @@ -14,9 +14,11 @@ export async function getStaticPaths({ paginate }) { const {page} = Astro.props; +const len = page.data.length; + --- - + \ No newline at end of file diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro index d825fb1..5b65733 100644 --- a/src/pages/posts/[...slug].astro +++ b/src/pages/posts/[...slug].astro @@ -112,10 +112,10 @@ const { remarkPluginFrontmatter } = await entry.render(); \ No newline at end of file