jianf/HomeDash
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 滑动切换只淡出页框内元素（页签行不动）+ 页签行跟随选中项

Browse Source 
用户反馈两点，均已实测定位：
① 整框（含顶部页签行）跟着淡出淡入 —— 不该动页签。
   原实现把 opacity 打在 .item-group-container 上（它同时包含页签行与内容）。
   改为只对 .minimal-section-inner.selected > *（.section-items + .minimal-widget-wrap）
   做 keyframes 淡出/淡入；框体与页签行保持不动。
   用 keyframes 而非 transition：这些子元素自带 `transition: all`，改 transition 会
   覆盖它们原有的 hover 过渡。
② 页签行不联动 —— 实测 .minimal-headings-row 可横向滚动
   （scrollWidth 1306 > clientWidth 828）但 scrollLeft 恒为 0，
   切到第 7/8 个分组时选中页签落在视口外（x=1374..1532 > 1280），
   用户看不出切换发生。新增 swipeRevealTab() 把选中项滚进可视区（居中，reduced-motion 下瞬时），
   手势切换与手动点页签都会触发。
另：边界回弹提示也改为只动页框内容，不再带动页签行。
This commit is contained in:
HomeDash Bot
2026-09-12 22:06:26 +08:00
parent f27f46099c
commit 86aced0c4a
2 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/navi.css
View File

@ -2490,3 +2490,21 @@ html[data-theme] .minimal-home.navi-dragging * {
user-select: none !important;
-webkit-user-select: none !important;
}
/* ═══ v91：滑动切换的淡出淡入只作用于"页框内的元素" ═══
用户反馈：① 此前整个内容框（含顶部页签行）一起淡出淡入 —— 页签不该闪；
② 页签行不联动（实测 .minimal-headings-row scrollWidth 1306 > clientWidth 828，
可横向滚动但 scrollLeft 恒为 0；切到第 7/8 个分组时选中页签在视口外）。
做法：淡出/淡入只打 .minimal-section-inner.selected 的直接子元素
（= .section-items 卡片 + .minimal-widget-wrap），框体与页签行不动。
用 keyframes 而不是 transition：这些子元素自带 `transition: all`，
改 transition 会覆盖它们原有的 hover 过渡。
页签行跟随由 navi.js 的 swipeRevealTab() 负责（滚动居中，reduced-motion 下瞬时）。 */
@keyframes navi-section-out { to { opacity: .12; } }
@keyframes navi-section-in { from { opacity: .12; } to { opacity: 1; } }
html[data-theme] .minimal-home.navi-switching .minimal-section-inner.selected > * {
animation: navi-section-out 90ms ease forwards !important;
}
html[data-theme] .minimal-home.navi-fadein .minimal-section-inner.selected > * {
animation: navi-section-in 150ms ease !important;
}