feat: 增加沉浸模式切换过渡动画

This commit is contained in:
JSR
2026-03-27 21:47:47 +08:00
parent e6d1e03238
commit 56d56e34ab
3 changed files with 114 additions and 35 deletions
+42
View File
@@ -225,3 +225,45 @@ html.platform-macos #root {
.ss-group-board-modal .ant-modal-body {
overflow: hidden;
}
.ss-immersive-sidebar {
--ss-sidebar-width: 200px;
width: var(--ss-sidebar-width);
overflow: hidden;
opacity: 1;
transform: translateX(0);
transition:
width 260ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 220ms ease,
transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: width, opacity, transform;
}
.ss-immersive-sidebar.is-hidden {
width: 0;
opacity: 0;
transform: translateX(-10px);
pointer-events: none;
}
.ss-immersive-toolbar {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
transition:
opacity 200ms ease,
transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.ss-immersive-toolbar.is-hidden {
opacity: 0;
transform: translateX(-50%) translateY(16px) scale(0.98);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.ss-immersive-sidebar,
.ss-immersive-toolbar {
transition: none !important;
}
}