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

74
src/layouts/Layout.astro
View File

@@ -3,10 +3,8 @@ import GlobalStyles from "@components/GlobalStyles.astro";
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import { ViewTransitions } from 'astro:transitions';
import ImageWrapper from "@components/misc/ImageWrapper.astro";
import { fade } from 'astro:transitions';
import {pathsEqual} from "@utils/url-utils";
import ConfigCarrier from "@components/ConfigCarrier.astro";
import {siteConfig} from "@/config";
@@ -54,6 +52,8 @@ if (!banner || typeof banner !== 'string' || banner.trim() === '') {
// TODO don't use post cover as banner for now
banner = siteConfig.banner.src;
const enableBanner = siteConfig.banner.enable;
let pageTitle;
if (title) {
pageTitle = `${title} - ${siteConfig.title}`;
@@ -66,7 +66,6 @@ if (title) {
<!DOCTYPE html>
<html lang="en" isHome={isHomePage} pathname={testPathName} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]">
<head>
<ViewTransitions />
<title>{pageTitle}</title>
@@ -88,15 +87,12 @@ if (title) {
<style define:vars={{ configHue }}></style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
</head>
<body class=" min-h-screen transition ">
<body class=" min-h-screen transition " class:list={[{"is-home": isHomePage, "enable-banner": enableBanner}]}>
<ConfigCarrier></ConfigCarrier>
<GlobalStyles>
<div id="banner-wrapper" class="absolute w-full transition-all"
class:list={{'banner-home': isHomePage, 'banner-else': !isHomePage}}
>
<div id="banner-wrapper" class="absolute w-full">
<ImageWrapper id="boxtest" alt="Banner image of the blog" class:list={["object-center object-cover h-full", {"hidden": !siteConfig.banner.enable}]}
src={siteConfig.banner.src} transition:animate="fade"
src={siteConfig.banner.src}
>
</ImageWrapper>
</div>
@@ -110,36 +106,32 @@ if (title) {
--page-width: 75rem;
}
</style>
<style>
<style is:global>
@tailwind components;
@tailwind utilities;
@layer components {
.banner-home {
/* TODO: temporarily make banner height same for all pages since I cannot make the transition feel good
I want to make the height transition parallel with the content transition instead of blocking it
*/
/*
.enable-banner.is-home #banner-wrapper {
@apply h-[var(--banner-height)] md:h-[var(--banner-height-home)]
}
.banner-else {
*/
.enable-banner #banner-wrapper {
@apply h-[var(--banner-height)]
}
}
#banner-wrapper {
view-transition-name: banner-ani;
}
/* i don't know how this work*/
html::view-transition-old(banner-ani) {
mix-blend-mode: normal;
animation: none;
height: 100%;
overflow: clip;
object-fit: none;
}
html::view-transition-new(banner-ani) {
mix-blend-mode: normal;
animation: none;
height: 100%;
overflow: clip;
object-fit: none;
/*
.enable-banner.is-home #top-row {
@apply h-[calc(var(--banner-height)_-_4.5rem)] md:h-[calc(var(--banner-height-home)_-_4.5rem)]
}
*/
.enable-banner #top-row {
@apply h-[calc(var(--banner-height)_-_4.5rem)]
}
}
</style>
<script>
@@ -281,6 +273,27 @@ init();
/* Load settings before swapping */
/* astro:after-swap event happened before swap animation */
document.addEventListener('astro:after-swap', init);
const setup = () => {
// TODO: temp solution to change the height of the banner
/*
window.swup.hooks.on('animation:out:start', () => {
const path = window.location.pathname
const body = document.querySelector('body')
if (path[path.length - 1] === '/' && !body.classList.contains('is-home')) {
body.classList.add('is-home')
} else if (path[path.length - 1] !== '/' && body.classList.contains('is-home')) {
body.classList.remove('is-home')
}
})
*/
}
if (window.swup.hooks) {
setup()
} else {
document.addEventListener('swup:enable', setup)
}
</script>
<style is:global lang="stylus">
@@ -291,5 +304,4 @@ document.addEventListener('astro:after-swap', init);
#banner-wrapper
top: -120px
opacity: 0
</style>

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>