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>