diff options
| author | Eltrac <hi@guhub.cn> | 2025-03-16 08:13:36 +0800 |
|---|---|---|
| committer | Eltrac <hi@guhub.cn> | 2025-03-16 08:13:36 +0800 |
| commit | 20eaaf8672648e88f62faf9f97ef34c75bc7f327 (patch) | |
| tree | 417306f4fcec2dd90f49a739b7c1bb15ff17429e | |
| parent | 1c61806b2bd1384fdedcf5c1320d80a0d3541570 (diff) | |
feat(animation): implement View Transition
Former-commit-id: c56a4855cfd5bce5af0c6f59b73cedec3fc1503d
| -rw-r--r-- | assets/css/components/_animation.scss | 10 | ||||
| -rw-r--r-- | layouts/_default/single.html | 10 | ||||
| -rw-r--r-- | 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> |