Merge pull request #859 from vusion/hotifx/tabs

fix(Tabs): 修复 tabs 动画卡顿的问题
vusion · Apr 17, 2024 · d262e0e · d262e0e
2 parents c2d5589 + 472115b
commit d262e0e
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/u-tabs.vue/index.css b/src/components/u-tabs.vue/index.css
@@ -292,18 +292,18 @@
 .root[appear="line"] > .head .item::after {
     display: block;
     content: '';
-    width: 0;
     height: var(--tabs-item-line-width);
     background: var(--tabs-item-line-background);
-    transform: translateX(-50%);
-    transition: width var(--transition-duration-base);
+    transform: scale(0);
+    transition: transform var(--transition-duration-base);
     position: absolute;
-    left: 50%;
+    left: 0;
     bottom: 0;
+    width: 100%;
 }
 
 .root[appear="line"] > .head .item[selected]::after {
-    width: 100%;
+    transform: scale(1);
 }
 
 .close {