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

feat: use Swug for transition animations instead of ViewTransitions

Browse Source
This commit is contained in:
saicaca
2024-03-12 14:04:58 +08:00
parent e64bd923da
commit a80d69d843
10 changed files with 3646 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/layouts/MainGridLayout.astro
View File

@@ -21,51 +21,23 @@ const enableBanner = siteConfig.banner.enable
<Layout title={title} banner={banner}>
<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"
transition:animate="none"
>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={["transition-all", {
'h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]': enableBanner && isHomePage,
'h-[calc(var(--banner-height)_-_4.5rem)]': enableBanner && !isHomePage,}]}
>
<Navbar transition:animate="fade" transition:persist></Navbar>
<div id="top-row" class="col-span-2 grid-rows-1 z-50" class:list={[""]}>
<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]" transition:persist></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]"></SideBar>
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden" transition:animate="slide">
<div class="row-start-2 row-end-3 col-span-2 lg:col-span-1 overflow-hidden">
<!-- the overflow-hidden here prevent long text break the layout-->
<slot></slot>
<main id="swup" class="transition-fade">
<slot></slot>
</main>
</div>
<div class="grid-rows-3 col-span-2 mt-4" transition:persist transition:animate="fade">
<Footer transition:persist></Footer>
<div class="grid-rows-3 col-span-2 mt-4">
<Footer></Footer>
</div>
<BackToTop></BackToTop>
</div>
</Layout>
<style>
#top-row {
view-transition-name: rrrr;
}
/* i don't know how this work*/
html::view-transition-old(rrrr) {
mix-blend-mode: normal;
animation: none;
height: auto;
overflow: clip;
object-fit: none;
}
html::view-transition-new(rrrr) {
mix-blend-mode: normal;
animation: none;
height: auto;
overflow: clip;
object-fit: none;
}
</style>
<style lang="stylus" is:global>
.banner-closed
#top-row
height: 4.5rem;
</style>