From a35999629af84915fc539d5790ac7e5c9bf52ec4 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Sat, 17 May 2025 20:18:41 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20fade=20up=20animation?= =?UTF-8?q?=20to=20post=20page,=20optimize=20global=20animation=20curves?= =?UTF-8?q?=20and=20durations,=20refine=20animation-related=20naming=20con?= =?UTF-8?q?ventions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 8 +++ src/components/Button.astro | 6 +- src/components/Header.astro | 2 +- src/components/PostList.astro | 4 +- src/components/Widgets/FadeUpAnimation.astro | 18 +++++ src/components/Widgets/GoBack.astro | 2 +- src/components/Widgets/TOC.astro | 2 +- src/layouts/Layout.astro | 7 +- src/pages/[...posts_slug].astro | 8 ++- src/styles/animation.css | 74 ++++++++++++++++++++ src/styles/extend.css | 2 +- src/styles/global.css | 37 +--------- src/styles/heti.css | 2 +- uno.config.ts | 2 +- 14 files changed, 122 insertions(+), 52 deletions(-) create mode 100644 src/components/Widgets/FadeUpAnimation.astro create mode 100644 src/styles/animation.css diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44a2fc7..123bae3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: feed: specifier: ^5.0.1 version: 5.0.1 + gsap: + specifier: ^3.13.0 + version: 3.13.0 markdown-it: specifier: ^14.1.0 version: 14.1.0 @@ -2191,6 +2194,9 @@ packages: graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} + gsap@3.13.0: + resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==} + gzip-size@6.0.0: resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} engines: {node: '>=10'} @@ -6284,6 +6290,8 @@ snapshots: graphemer@1.4.0: {} + gsap@3.13.0: {} + gzip-size@6.0.0: dependencies: duplexer: 0.1.2 diff --git a/src/components/Button.astro b/src/components/Button.astro index 353962d..fa282f2 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -93,15 +93,15 @@ function setupThemeToggle() { } // Temporarily add markers during animation to implement view transition and disable CSS transitions - document.documentElement.style.setProperty('view-transition-name', 'theme-transition') - document.documentElement.setAttribute('data-theme-transition', '') + document.documentElement.style.setProperty('view-transition-name', 'animation-theme-toggle') + document.documentElement.setAttribute('data-theme-changing', '') // If browser supports View Transitions API, use it to update theme const themeTransition = document.startViewTransition(updateTheme) // Remove markers after animation themeTransition.finished.then(() => { document.documentElement.style.removeProperty('view-transition-name') - document.documentElement.removeAttribute('data-theme-transition') + document.documentElement.removeAttribute('data-theme-changing') }) }) }) diff --git a/src/components/Header.astro b/src/components/Header.astro index 01ecec4..f47df3e 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -32,7 +32,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
{post.data.title} @@ -62,7 +62,7 @@ function getPostPath(post: Post) {
+function resetFadeUpAnimation() { + document.querySelectorAll('.animation-fade-up').forEach((container) => { + const childElements = Array.from(container.children).slice(0, 20) + childElements.forEach(element => + (element as HTMLElement).style.animationName = 'none', + ) + requestAnimationFrame(() => { + childElements.forEach(element => + (element as HTMLElement).style.animationName = '', + ) + }) + }) +} + +resetFadeUpAnimation() +document.addEventListener('astro:page-load', resetFadeUpAnimation) + diff --git a/src/components/Widgets/GoBack.astro b/src/components/Widgets/GoBack.astro index 2136edc..8109520 100644 --- a/src/components/Widgets/GoBack.astro +++ b/src/components/Widgets/GoBack.astro @@ -5,7 +5,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';