Răsfoiți Sursa

fix(editor): 修复Tab切换动画闪烁问题,改用淡入淡出效果

何文松 3 săptămâni în urmă
părinte
comite
3881dcb887
1 a modificat fișierele cu 7 adăugiri și 32 ștergeri
  1. 7 32
      frontend/vue-demo/src/views/Editor.vue

+ 7 - 32
frontend/vue-demo/src/views/Editor.vue

@@ -2738,7 +2738,7 @@ onUnmounted(() => {
     padding: 10px 12px;
     border-bottom: 1px solid var(--border);
     background: var(--white);
-    flex-wrap: wrap;
+    overflow: hidden;
     
     .panel-tab {
       padding: 6px 10px;
@@ -2785,43 +2785,18 @@ onUnmounted(() => {
     }
   }
   
-  // Tab 滑入动画
+  // Tab 滑入动画 - 简化为淡入淡出
   .tab-slide-enter-active {
-    animation: tabSlideIn 0.3s ease-out;
+    transition: opacity 0.25s ease-out;
   }
   
   .tab-slide-leave-active {
-    animation: tabSlideOut 0.2s ease-in;
+    transition: opacity 0.15s ease-in;
   }
   
-  @keyframes tabSlideIn {
-    from {
-      opacity: 0;
-      transform: translateX(-10px);
-      max-width: 0;
-      padding: 8px 0;
-    }
-    to {
-      opacity: 1;
-      transform: translateX(0);
-      max-width: 150px;
-      padding: 8px 14px;
-    }
-  }
-  
-  @keyframes tabSlideOut {
-    from {
-      opacity: 1;
-      transform: translateX(0);
-      max-width: 150px;
-      padding: 8px 14px;
-    }
-    to {
-      opacity: 0;
-      transform: translateX(-10px);
-      max-width: 0;
-      padding: 8px 0;
-    }
+  .tab-slide-enter-from,
+  .tab-slide-leave-to {
+    opacity: 0;
   }
 
   .panel-header {