feat: 页面切换动画

2026-07-28 15:24:42 +08:00
parent a7399c997d
commit 49dbde11e0
3 changed files with 52 additions and 11 deletions
@@ -114,3 +114,32 @@ a {
 .ant-tag {
  margin-right: 0;
 }
+
+// ===== 页面切换动画（KeepAlive + RouterView） =====
+
+.page-fade-slide-enter-active,
+.page-fade-slide-leave-active {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  transition:
+    opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.page-fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(12px);
+}
+
+.page-fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-12px);
+}
+
+.page-fade-slide-leave-active {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  overflow: hidden;
+}