feat(toc): add sticky positioning and entry animation for improved UX
这个提交包含在:
@@ -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 {
|
||||
|
||||
在新议题中引用
屏蔽一个用户