mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-07-05 07:57:29 +08:00
refactor(ui): 优化骨架屏加载效果,修复用户页左侧黑色背景
- 关键布局组件(AppMenu/TitleBar/SearchBar)改为同步导入,消除加载闪烁 - 新增全局 skeleton-shimmer 流光动画替代 animate-pulse 闪烁效果 - 用户页 loading 骨架屏避免使用 .left scoped 样式导致的深色背景 - 全部 n-skeleton 组件替换为原生 div + shimmer,统一圆角风格 - 菜单容器添加背景色防止加载穿透
This commit is contained in:
@@ -136,3 +136,43 @@
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架屏 shimmer 动画 */
|
||||
.skeleton-shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.skeleton-shimmer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.4) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: shimmer 1.5s infinite;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
:root.dark .skeleton-shimmer {
|
||||
background: #262626;
|
||||
}
|
||||
|
||||
:root.dark .skeleton-shimmer::after {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.06) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user