nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复分享按钮面板无法显示的问题

Browse Source 
- 移除 overflow:hidden 避免裁剪分享面板
- 改用 translateY + opacity 实现上滑淡出/淡入效果
- 桌面端：分享按钮上滑淡出，分享渠道从下方滑入
- 移动端：保持弹窗式布局，按钮旋转45度
- 优化动画时序，更加流畅自然
This commit is contained in:
nanhaoluo
2026-01-16 15:37:46 +08:00
parent a0a05e8177
commit 8c2417a9f1
1 changed files with 30 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
style.css
View File

@@ -8229,8 +8229,6 @@ body.noscroll:before {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
align-items: flex-end; align-items: flex-end;
overflow: hidden;
border-radius: 10px;
} }
#comments_toggle { #comments_toggle {
@@ -8262,14 +8260,6 @@ body.noscroll:before {
font-size: 14px; font-size: 14px;
} }
/* 分享按钮和面板共用过渡 */
#share,
#share_show {
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform, opacity;
}
/* 分享按钮 - 默认显示 */ /* 分享按钮 - 默认显示 */
#share_show { #share_show {
position: relative; position: relative;
@@ -8283,6 +8273,8 @@ body.noscroll:before {
border-color: var(--themecolor) !important; border-color: var(--themecolor) !important;
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
} }
#share_show:hover { #share_show:hover {
@@ -8295,7 +8287,7 @@ body.noscroll:before {
border-color: var(--themecolor-dark2) !important; border-color: var(--themecolor-dark2) !important;
} }
/* 分享面板 - 默认隐藏在下方 */ /* 分享面板 - 默认隐藏 */
#share { #share {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -8303,27 +8295,29 @@ body.noscroll:before {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 6px; gap: 6px;
transform: translateY(100%); transform: translateY(15px);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
} }
/* 分享渠道按钮 */ /* 分享渠道按钮初始状态 */
#share > a { #share > a {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(10px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s ease-out; opacity 0.2s ease-out;
} }
/* 展开状态 - 分享按钮上滑退出 */ /* 展开状态 - 分享按钮上滑淡出 */
#share_container.opened #share_show { #share_container.opened #share_show {
transform: translateY(-100%); transform: translateY(-15px);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
/* 展开状态 - 分享面板从下方滑入 */ /* 展开状态 - 分享面板上滑淡入 */
#share_container.opened #share { #share_container.opened #share {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
@@ -8336,24 +8330,24 @@ body.noscroll:before {
transform: translateY(0); transform: translateY(0);
} }
#share_container.opened #share > a:nth-child(1) { transition-delay: 50ms; } #share_container.opened #share > a:nth-child(1) { transition-delay: 30ms; }
#share_container.opened #share > a:nth-child(2) { transition-delay: 80ms; } #share_container.opened #share > a:nth-child(2) { transition-delay: 60ms; }
#share_container.opened #share > a:nth-child(3) { transition-delay: 110ms; } #share_container.opened #share > a:nth-child(3) { transition-delay: 90ms; }
#share_container.opened #share > a:nth-child(4) { transition-delay: 140ms; } #share_container.opened #share > a:nth-child(4) { transition-delay: 120ms; }
#share_container.opened #share > a:nth-child(5) { transition-delay: 170ms; } #share_container.opened #share > a:nth-child(5) { transition-delay: 150ms; }
#share_container.opened #share > a:nth-child(6) { transition-delay: 200ms; } #share_container.opened #share > a:nth-child(6) { transition-delay: 180ms; }
#share_container.opened #share > a:nth-child(7) { transition-delay: 230ms; } #share_container.opened #share > a:nth-child(7) { transition-delay: 210ms; }
#share_container.opened #share > a:nth-child(8) { transition-delay: 260ms; } #share_container.opened #share > a:nth-child(8) { transition-delay: 240ms; }
/* 收起时各按钮错落滑出 */ /* 收起时各按钮错落滑出 */
#share_container:not(.opened) #share > a:nth-child(8) { transition-delay: 0ms; } #share_container:not(.opened) #share > a:nth-child(8) { transition-delay: 0ms; }
#share_container:not(.opened) #share > a:nth-child(7) { transition-delay: 20ms; } #share_container:not(.opened) #share > a:nth-child(7) { transition-delay: 15ms; }
#share_container:not(.opened) #share > a:nth-child(6) { transition-delay: 40ms; } #share_container:not(.opened) #share > a:nth-child(6) { transition-delay: 30ms; }
#share_container:not(.opened) #share > a:nth-child(5) { transition-delay: 60ms; } #share_container:not(.opened) #share > a:nth-child(5) { transition-delay: 45ms; }
#share_container:not(.opened) #share > a:nth-child(4) { transition-delay: 80ms; } #share_container:not(.opened) #share > a:nth-child(4) { transition-delay: 60ms; }
#share_container:not(.opened) #share > a:nth-child(3) { transition-delay: 100ms; } #share_container:not(.opened) #share > a:nth-child(3) { transition-delay: 75ms; }
#share_container:not(.opened) #share > a:nth-child(2) { transition-delay: 120ms; } #share_container:not(.opened) #share > a:nth-child(2) { transition-delay: 90ms; }
#share_container:not(.opened) #share > a:nth-child(1) { transition-delay: 140ms; } #share_container:not(.opened) #share > a:nth-child(1) { transition-delay: 105ms; }
/* 分享按钮通用样式 */ /* 分享按钮通用样式 */
#share_container .btn { #share_container .btn {
@@ -8369,10 +8363,6 @@ body.noscroll:before {
/* 移动端适配 */ /* 移动端适配 */
@media (max-width: 576px) { @media (max-width: 576px) {
#share_container {
overflow: visible;
}
#share { #share {
position: fixed; position: fixed;
bottom: 80px; bottom: 80px;
@@ -8385,13 +8375,14 @@ body.noscroll:before {
background: var(--color-foreground); background: var(--color-foreground);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transform: translateY(30px); transform: translateY(20px);
} }
#share_container.opened #share { #share_container.opened #share {
transform: translateY(0); transform: translateY(0);
} }
/* 移动端分享按钮旋转而不是消失 */
#share_container.opened #share_show { #share_container.opened #share_show {
transform: rotate(45deg); transform: rotate(45deg);
opacity: 1; opacity: 1;
@@ -8400,13 +8391,10 @@ body.noscroll:before {
} }
/* 夜间模式 */ /* 夜间模式 */
html.darkmode #share {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 576px) { @media (max-width: 576px) {
html.darkmode #share { html.darkmode #share {
background: var(--color-foreground); background: var(--color-foreground);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} }
} }