fix: 加快操作弹窗过渡动画

This commit is contained in:
JSR
2026-07-18 09:23:39 +08:00
parent 51b6047b2c
commit fa162b2b57
2 changed files with 7 additions and 7 deletions
+5 -5
View File
@@ -307,12 +307,12 @@ html.platform-macos body {
.ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-container, .ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-container,
.ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-content { .ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-content {
animation: ss-operation-shell-in 620ms cubic-bezier(0.2, 0, 0, 1) both; animation: ss-operation-shell-in 480ms cubic-bezier(0.2, 0, 0, 1) both;
} }
.ss-home-operation-morph-modal.ss-operation-morph-closing .ant-modal-container, .ss-home-operation-morph-modal.ss-operation-morph-closing .ant-modal-container,
.ss-home-operation-morph-modal.ss-operation-morph-closing .ant-modal-content { .ss-home-operation-morph-modal.ss-operation-morph-closing .ant-modal-content {
animation: ss-operation-shell-out 460ms cubic-bezier(0.4, 0, 0.2, 1) both; animation: ss-operation-shell-out 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
} }
@keyframes ss-operation-shell-in { @keyframes ss-operation-shell-in {
@@ -345,13 +345,13 @@ html.platform-macos body {
.ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-score-label, .ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-score-label,
.ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-close { .ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-close {
animation: ss-operation-meta-in 360ms 230ms cubic-bezier(0.2, 0, 0, 1) both; animation: ss-operation-meta-in 260ms 160ms cubic-bezier(0.2, 0, 0, 1) both;
} }
.ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-quick-buttons, .ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-quick-buttons,
.ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-divider, .ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-divider,
.ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-reasons { .ss-home-operation-morph-modal.ss-operation-morph-active .ss-operation-designed-reasons {
animation: ss-operation-body-in 400ms 300ms cubic-bezier(0.2, 0, 0, 1) both; animation: ss-operation-body-in 300ms 150ms cubic-bezier(0.2, 0, 0, 1) both;
} }
.ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-score-label, .ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-score-label,
@@ -359,7 +359,7 @@ html.platform-macos body {
.ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-quick-buttons, .ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-quick-buttons,
.ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-divider, .ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-divider,
.ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-reasons { .ss-home-operation-morph-modal.ss-operation-morph-closing .ss-operation-designed-reasons {
animation: ss-operation-content-out 180ms cubic-bezier(0.4, 0, 1, 1) both; animation: ss-operation-content-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
} }
.ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-body, .ss-home-operation-morph-modal.ss-operation-morph-active .ant-modal-body,
+2 -2
View File
@@ -200,8 +200,8 @@ export const Home: React.FC<HomeProps> = ({
const operationCloseTokenRef = useRef(0) const operationCloseTokenRef = useRef(0)
const operationModalRootClass = "ss-home-operation-morph-root" const operationModalRootClass = "ss-home-operation-morph-root"
const operationModalClass = "ss-home-operation-morph-modal" const operationModalClass = "ss-home-operation-morph-modal"
const operationMorphOpenDuration = 620 const operationMorphOpenDuration = 480
const operationMorphCloseDuration = 460 const operationMorphCloseDuration = 360
const operationMorphEasing = "cubic-bezier(0.2, 0, 0, 1)" const operationMorphEasing = "cubic-bezier(0.2, 0, 0, 1)"
const operationMorphCloseEasing = "cubic-bezier(0.4, 0, 0.2, 1)" const operationMorphCloseEasing = "cubic-bezier(0.4, 0, 0.2, 1)"