edit(关于页): 动画只播一次,滚回不再重播

- 删掉内容组全部 repeat: true(attrs/tl/stats/bars/tags/走心评论/相册)
- 首次滚进照常播入场动画,滚回保持就位不重播不重藏
- 分类条 inview 常驻 → 宽度保持不重长
- 同步更新各处注释
This commit is contained in:
zqlit committed 2026-10-07 22:54:37 +08:00
1 parent 72bbf9db3e
commit 202ee76cd2
4 files changed
+15 -15

No files matched your search

@@ -60,10 +60,10 @@
动效:与归档页 page/archives.html 完全同源的官方写法:
· target 用后代选择器(不写 `>`,避免结构耦合选不中)
· 动画类用官方 uk-animation-slide-*-medium(50px 位移,看得清)
· repeat: true —— 每次滚进视口都重播(归档页年份标题同款),
这是「滚动时页面是活的」的关键;hidden 用默认值
· 不写 repeat —— 只在首次滚进时播一次,滚回保持就位不重播
(用户定案 2026-10-07);hidden 用默认值
· delay 官方语义:同一批进视口的 target 依次累加 → 自动错落 -->
<div class="ab-attrs" uk-scrollspy="target: .ab-attr; cls: uk-animation-slide-bottom-medium; delay: 80; repeat: true">
<div class="ab-attrs" uk-scrollspy="target: .ab-attr; cls: uk-animation-slide-bottom-medium; delay: 80">
<div class="ab-attr"><span class="k">坐标</span><span class="v">湖北 · 襄阳 → 广州</span></div>
<div class="ab-attr"><span class="k">其人</span><span class="v">00 后,性格随和,风趣幽默</span></div>
<div class="ab-attr"><span class="k">打算</span><span class="v">未来计划定居江苏南京</span></div>
@@ -72,7 +72,7 @@
</div>
<!-- 时间线:节点自左向右滑入(官方 slide-right-medium),四点次第点亮 -->
<div class="ab-tl" uk-scrollspy="target: .ab-item; cls: uk-animation-slide-right-medium; delay: 110; repeat: true">
<div class="ab-tl" uk-scrollspy="target: .ab-item; cls: uk-animation-slide-right-medium; delay: 110">
{{- range $nodes }}
<div class="ab-item{{ if .isNow }} is-now{{ end }}">
<div class="ab-when">{{ .when }}</div>
@@ -84,7 +84,7 @@
<!-- ─────────── 02 / 数据一览(方案 C) ───────────
三张数据卡依次自下浮起(官方 slide-bottom-medium)。 -->
<div class="ab-stats" uk-scrollspy="target: .ab-stat; cls: uk-animation-slide-bottom-medium; delay: 120; repeat: true">
<div class="ab-stats" uk-scrollspy="target: .ab-stat; cls: uk-animation-slide-bottom-medium; delay: 120">
<div class="ab-stat"><span class="n">{{ $total }}</span><span class="l">篇文章</span></div>
<div class="ab-stat"><span class="n">{{ $spanYears }}</span><span class="l">年积累</span></div>
<div class="ab-stat"><span class="n">{{ $thisYear }}</span><span class="l">今年更新</span></div>
@@ -93,8 +93,8 @@
{{- if $top }}
<!-- 分类条:条体浮起,条内填充宽度由 CSS transition 从 0 长出(UIKit 不管宽度)。
★ 目标宽度写进内联 --ab-bar-w,CSS 在 .uk-scrollspy-inview 时放行;
repeat 移出视口时类被摘掉 → 宽度回到 0,下次滚进重新长出。 -->
<div class="ab-bars" uk-scrollspy="target: .ab-bar; cls: uk-animation-slide-bottom-medium; delay: 60; repeat: true">
不写 repeat → inview 类常驻,滚回时宽度保持、不重长。 -->
<div class="ab-bars" uk-scrollspy="target: .ab-bar; cls: uk-animation-slide-bottom-medium; delay: 60">
{{- range $top }}
{{- $pct := div (mul .count 100) $maxC }}
<div class="ab-bar" style="--ab-bar-w: {{ $pct }}%;">