From c56a4855cfd5bce5af0c6f59b73cedec3fc1503d Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sun, 16 Mar 2025 08:13:36 +0800
Subject: feat(animation): implement View Transition

---
 assets/css/components/_animation.scss | 10 +++-------
 layouts/_default/single.html          | 10 ++++++++--
 layouts/index.html                    |  5 ++++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/assets/css/components/_animation.scss b/assets/css/components/_animation.scss
index a47bfafc..039de17e 100644
--- a/assets/css/components/_animation.scss
+++ b/assets/css/components/_animation.scss
@@ -1,9 +1,5 @@
-/* transition swup */
+/* page transition */
 
-html.is-changing .transition-fade {
-  transition: opacity 0.25s;
-  opacity: 1;
-}
-html.is-animating .transition-fade {
-  opacity: 0;
+@view-transition {
+  navigation: auto;
 }
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3733936e..243f8549 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,12 +1,18 @@
 {{ partial "snippets/document-start.html" . }}
-    <article class="post {{ .Site.Language.LanguageName }}" id="article">
+    <article
+        class="post {{ .Site.Language.LanguageName }}"
+        id="article"
+    >
         {{ if eq .Type "posts" }}
             {{ partial "components/breadcrumbs.html" . }}
         {{ else }}
             {{ partial "header.html" . }}
         {{ end }}
       <!-- Post Header -->
-      <header class="post-header">
+      <header
+        style="view-transition-name: post-{{ .File.UniqueID }}"
+        class="post-header"
+      >
         {{ if in .Site.Params.mainSections .Type }}
         {{ partial "components/banner.html" . }}
         <!-- Title and Subtitle -->
diff --git a/layouts/index.html b/layouts/index.html
index e8fadb65..47f2fb03 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -26,6 +26,7 @@
                           <div class="row">
                             <div class="col-xs-11 col-sm-10">
                               <a
+                                  style="view-transition-name: post-{{ .File.UniqueID }}"
                                   class="posts-title-link"
                                   href="{{ .RelPermalink }}"
                                   data-umami-event="Click Post Link from Index"
@@ -44,7 +45,9 @@
                             <div class="col-xs-1 col-sm-2 posts-categories">
                               {{ with .Params.categories }}
                               <div class="posts-category">
-                                <a href="/categories/{{ . }}/"><strong>{{ . }}</strong></a>
+                                <a
+                                    href="/categories/{{ . }}/"
+                                ><strong>{{ . }}</strong></a>
                               </div>
                               {{ end }}
                             </div>
-- 
cgit v1.2.3