Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-12 07:12:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: onload animation tweaks

Browse Source
This commit is contained in:
saicaca
2024-03-13 01:32:54 +08:00
parent 2ff9b8544e
commit df30781cdc
11 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/[...page].astro
View File

@@ -14,9 +14,11 @@ export async function getStaticPaths({ paginate }) {
const {page} = Astro.props;
const len = page.data.length;
---
<MainGridLayout>
<PostPage page={page}></PostPage>
<Pagination class="mx-auto" page={page}></Pagination>
<Pagination class="mx-auto onload-animation" page={page} style=`animation-delay: calc(var(--content-delay) + ${(len)*50}ms)`></Pagination>
</MainGridLayout>

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

@@ -112,10 +112,10 @@ const { remarkPluginFrontmatter } = await entry.render();
</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 }
#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) }
</style>