Amadeus
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: onload animation for article pages

This commit is contained in:
saicaca 2024-03-12 18:38:14 +08:00
parent dfa863369b
commit 2ff9b8544e
2 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/GlobalStyles.astro
View File

@ -257,7 +257,7 @@ color_set({
} }
.onload-animation { .onload-animation {
opacity: 0; opacity: 0;
animation: 600ms fade-in-up; animation: 500ms fade-in-up;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
#top-row { #top-row {

25
src/pages/posts/[...slug].astro
View File

@ -29,11 +29,11 @@ const { remarkPluginFrontmatter } = await entry.render();
--- ---
<MainGridLayout banner={entry.data.image} title={entry.data.title}> <MainGridLayout banner={entry.data.image} title={entry.data.title}>
<div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4"> <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
<div class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ", <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
{} {}
]}> ]}>
<!-- word count and reading time --> <!-- word count and reading time -->
<div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition"> <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
<div class="flex flex-row items-center"> <div class="flex flex-row items-center">
<div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2"> <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
<Icon name="material-symbols:notes-rounded"></Icon> <Icon name="material-symbols:notes-rounded"></Icon>
@ -49,7 +49,7 @@ const { remarkPluginFrontmatter } = await entry.render();
</div> </div>
<!-- title --> <!-- title -->
<div class="relative"> <div class="relative onload-animation">
<div <div
data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title" data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
class="transition w-full block font-bold mb-3 class="transition w-full block font-bold mb-3
@ -63,26 +63,28 @@ const { remarkPluginFrontmatter } = await entry.render();
</div> </div>
<!-- metadata --> <!-- metadata -->
<div class="onload-animation">
<PostMetadata <PostMetadata
class="mb-5" class="mb-5"
published={entry.data.published} published={entry.data.published}
tags={entry.data.tags} tags={entry.data.tags}
category={entry.data.category} category={entry.data.category}
></PostMetadata> ></PostMetadata>
{!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
</div>
<!-- always show cover as long as it has one --> <!-- always show cover as long as it has one -->
{entry.data.image && {entry.data.image &&
<ImageWrapper src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl"/> <ImageWrapper src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
} }
{!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
<Markdown class="mb-6"> <Markdown class="mb-6 markdown-content onload-animation">
<Content /> <Content />
</Markdown> </Markdown>
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl"></License>} {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
</div> </div>
</div> </div>
@ -108,3 +110,12 @@ const { remarkPluginFrontmatter } = await entry.render();
</div> </div>
</MainGridLayout> </MainGridLayout>
<style is:global>
#post-container :nth-child(1) { animation-delay: 0ms }
#post-container :nth-child(2) { animation-delay: 75ms }
#post-container :nth-child(3) { animation-delay: 150ms }
#post-container :nth-child(4) { animation-delay: 300ms }
#post-container :nth-child(5) { animation-delay: 450ms }
#post-container :nth-child(6) { animation-delay: 600ms }
</style>