feat(toc): add sticky positioning and entry animation for improved UX
Theme CD / Package Theme (release) Successful in 38s
Theme CD / Release (release) Successful in 15s

这个提交包含在:
rohow
2026-01-30 23:06:59 +08:00
未验证
父节点 d9a636c54e
当前提交 4497f4dfcb
修改 4 个文件,包含 47 行新增17 行删除
+18 -1
查看文件
@@ -10,6 +10,10 @@
--dash-spacing: 10px;
--dash-width: 2px;
// 进入动画初始状态(仅 sticky 激活时播放)
opacity: 1;
transition: opacity 0.3s ease-in-out;
// 虚线背景层 - 带遮罩
&::before {
content: '';
@@ -81,6 +85,10 @@
opacity: 0.8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* 进入动画:透明度由0到1,宽度由中间到100% */
animation: sticky-in 0.5s ease-in-out forwards;
opacity: 1;
&::before {
animation: line-flow 1.5s linear infinite;
mask-image: none;
@@ -126,4 +134,13 @@
left: 80%;
opacity: 0;
}
}
}
@keyframes sticky-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
+24 -13
查看文件
@@ -1,14 +1,21 @@
@import "variables";
.post-toc-sticky {
position: sticky;
top: 0;
z-index: 100;
width: 0;
height: 0;
overflow: visible;
transform: translate(-260px, 100px);
}
.post-toc {
position: absolute;
left: -280px;
top: 85px;
position: relative;
width: 200px;
max-height: calc(100vh - 200px);
overflow-y: auto;
overflow-x: hidden;
z-index: 100;
font-size: 0.8rem;
line-height: 1.6;
color: var(--foreground);
@@ -126,6 +133,18 @@
transition: color 0.15s ease, opacity 0.15s ease;
}
// 左侧激活指示线
&::before {
content: '' !important;
position: absolute;
left: -10px !important;
top: 4px;
bottom: 4px;
width: 2px;
background-color: transparent;
border-radius: 1px;
}
// 活跃状态
&--active {
background-color: color-mix(in srgb, var(--brightBlue) 15%, transparent);
@@ -139,16 +158,8 @@
color: var(--brightBlue);
}
// 左侧激活指示线
&::before {
content: '' !important;
position: absolute;
left: -10px !important;
top: 4px;
bottom: 4px;
width: 2px;
background-color: var(--brightBlue);
border-radius: 1px;
}
}
}
@@ -178,7 +189,7 @@
&__icon {
margin-right: 6px;
color: var(--yellow);
color: var(--red);
}
&__title {