fix: restore ecommerce page transitions

This commit is contained in:
Codex
2026-06-11 23:40:26 +08:00
parent 70a4bbed29
commit 13a7c3ba5a
2 changed files with 113 additions and 9 deletions
+105 -1
View File
@@ -2394,7 +2394,21 @@
.ecommerce-standalone .ecommerce-auth-modal__scrim,
.ecommerce-standalone .ecommerce-profile-popover__backdrop,
.ecommerce-standalone .product-set-preview-backdrop,
.ecommerce-standalone .ecom-command-asset-popover {
.ecommerce-standalone .ecom-command-asset-popover,
.ecommerce-standalone .ecom-tool-page-enter,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
animation: none !important;
}
@@ -8819,6 +8833,96 @@
}
}
@keyframes ecom-tool-page-enter {
from {
opacity: 0;
transform: translateY(14px) scale(0.992);
filter: saturate(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: saturate(1);
}
}
@keyframes ecom-tool-panel-enter {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ecom-tool-side-enter {
from {
opacity: 0;
transform: translateX(-14px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes ecom-tool-stage-enter {
from {
opacity: 0;
transform: translateX(16px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ecommerce-standalone .ecom-tool-page-enter {
animation: ecom-tool-page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
will-change: opacity, transform;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar,
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav {
animation: ecom-tool-side-enter 430ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload,
.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor {
animation: ecom-tool-stage-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section,
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel,
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel {
animation: ecom-tool-panel-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(1),
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(1),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(1) {
animation-delay: 80ms !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(2),
.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(2),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(2) {
animation-delay: 130ms !important;
}
.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(3),
.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(3) {
animation-delay: 180ms !important;
}
@keyframes ecom-smart-upload-enter {
from {
opacity: 0;