edit(关于页): 动画只播一次,滚回不再重播
- 删掉内容组全部 repeat: true(attrs/tl/stats/bars/tags/走心评论/相册) - 首次滚进照常播入场动画,滚回保持就位不重播不重藏 - 分类条 inview 常驻 → 宽度保持不重长 - 同步更新各处注释
This commit is contained in:
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 }}%;">
|
||||
|
||||
@@ -131,7 +131,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="featc-wrap" uk-scrollspy="target: .featc-item; cls: uk-animation-slide-bottom-medium; delay: 80; repeat: true">
|
||||
<div class="featc-wrap" uk-scrollspy="target: .featc-item; cls: uk-animation-slide-bottom-medium; delay: 80">
|
||||
<div class="featc-title">走心评论<span class="featc-count" id="featc-count" hidden></span></div>
|
||||
<p class="featc-desc">当我看到各位在不同的时间和故事中,发出一份份走心的评论时,一份温暖之意即笼罩在我的心头。</p>
|
||||
<!-- ★ 卡片是异步渲染的(接口 1–1.5s),UIKit 的 MutationObserver 只在
|
||||
@@ -203,10 +203,10 @@
|
||||
|
||||
// ★ 卡片是 fetch 回来后才插进 DOM 的,UIKit 的 MutationObserver 捕捉不到
|
||||
// (它只对「属性新增」反应,不管新插入的子树)—— 必须手动 boot 一次。
|
||||
// 之后完全交给 scrollspy(repeat: true):
|
||||
// 之后完全交给 scrollspy(不写 repeat,只播一次):
|
||||
// · 这一节在视口内 → 同一批 target 进同一个 update 周期,
|
||||
// delay 依次累加,自动错落浮现;
|
||||
// · 在视口外 → 先藏住,滚到时逐条入场,滚走再滚回会重播。
|
||||
// · 在视口外 → 先藏住,首次滚到时逐条入场,滚回不重播。
|
||||
if (typeof window.UIkit !== 'undefined' && typeof window.UIkit.update === 'function') {
|
||||
try { window.UIkit.update(grid); } catch (e) {}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user