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

feat: onload animation

This commit is contained in:
saicaca 2024-03-12 16:13:10 +08:00
parent a80d69d843
commit dfa863369b
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/GlobalStyles.astro
View File

@ -245,4 +245,33 @@ color_set({
}
}
@keyframes fade-in-up {
0% {
transform: translateY(2rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.onload-animation {
opacity: 0;
animation: 600ms fade-in-up;
animation-fill-mode: forwards;
}
#top-row {
animation-delay: 0ms
}
#sidebar {
animation-delay: 150ms
}
#content-wrapper {
animation-delay: 350ms;
}
#footer {
animation-delay: 500ms;
}
</style>

9
src/layouts/MainGridLayout.astro
View File

@ -22,12 +22,13 @@ const enableBanner = siteConfig.banner.enable
<div class="max-w-[var(--page-width)] min-h-screen grid grid-cols-[17.5rem_auto] grid-rows-[auto_auto_1fr_auto] lg:grid-rows-[auto_1fr_auto]
mx-auto gap-4 relative px-0 md:px-4"
>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={[""]}>
<div id="top-row" class="col-span-2 grid-rows-1 z-50 onload-animation" class:list={[""]}>
<div class="absolute h-8 left-0 right-0 -top-8 bg-[var(--card-bg)] transition"></div> <!-- used for onload animation -->
<Navbar></Navbar>
</div>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem]"></SideBar>
<SideBar class="row-start-3 row-end-4 col-span-2 lg:row-start-2 lg:row-end-3 lg:col-span-1 lg:max-w-[17.5rem] onload-animation"></SideBar>
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden">
<div id="content-wrapper" class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden onload-animation">
<!-- the overflow-hidden here prevent long text break the layout-->
<main id="swup" class="transition-fade">
<slot></slot>
@ -35,7 +36,7 @@ const enableBanner = siteConfig.banner.enable
</div>
<div class="grid-rows-3 col-span-2 mt-4">
<div id="footer" class="grid-rows-3 col-span-2 mt-4 onload-animation">
<Footer></Footer>
</div>
<BackToTop></BackToTop>