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 }}%;">
|
||||
|
||||
Reference in new issue
Block a user