perf(style): 优化 routerTab 默认过渡效果

bhuh12 · Jul 10, 2019 · b5053f0 · b5053f0
1 parent ff7a6b4
commit b5053f0
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 21 deletions.
diff --git a/src/lib/RouterTab/components/RouterTab.js b/src/lib/RouterTab/components/RouterTab.js
@@ -30,7 +30,7 @@ export default {
     // 页签过渡效果
     tabTransition: {
       type: [ String, Object ],
-      default: 'router-tab-zoom-lb'
+      default: 'router-tab-zoom'
     },
 
     // 页面过渡效果

diff --git a/src/lib/RouterTab/components/RouterTab.vue b/src/lib/RouterTab/components/RouterTab.vue
@@ -9,6 +9,7 @@
           v-bind="typeof tabTransition === 'string' ? { name: tabTransition } : tabTransition"
           @after-enter="onTabTransitionEnd"
           @after-leave="onTabTransitionEnd">
+
           <router-link
             class="router-tab-item"
             tag="li"
@@ -18,6 +19,7 @@
             :key="id || to"
             :to="to"
             @contextmenu.native.prevent="e => showContextmenu(id, index, e)">
+
             <slot v-bind="{
               tab: items[index],
               tabs: items,

diff --git a/src/lib/RouterTab/scss/RouterTab.scss b/src/lib/RouterTab/scss/RouterTab.scss
@@ -62,6 +62,7 @@ $color-primary: #409eff;
     border-bottom: none;
     cursor: pointer;
     transition: all .3s ease-in-out;
+    transform-origin: left bottom;
     user-select: none;
 
     &.actived {
@@ -198,7 +199,8 @@ $color-primary: #409eff;
     font-size: 13px;
 		background: #fff;
     box-shadow: 0 1px 6px 3px rgba(0,0,0,.2);
-    transition: all .2s ease-in-out;
+    transition: all .3s ease-in-out;
+    transform-origin: left top;
 
 		.contextmenu-item {
 			display: block;

diff --git a/src/lib/RouterTab/scss/transition.scss b/src/lib/RouterTab/scss/transition.scss
@@ -1,10 +1,9 @@
 // transition 过渡样式
 .router-tab {
-  &-zoom-lt,
-  &-zoom-lb {
+  &-zoom {
     &-enter-active,
     &-leave-active {
-      transition: all .3s;
+      transition: all .4s;
     }
 
     &-enter,
@@ -14,22 +13,6 @@
     }
   }
 
-  // 缩放-左上
-  &-zoom-lt {
-    &-enter-active,
-    &-leave-active {
-      transform-origin: left top;
-    }
-  }
-
-  // 缩放-左下
-  &-zoom-lb {
-    &-enter-active,
-    &-leave-active {
-      transform-origin: left bottom;
-    }
-  }
-
   // 页面交换
   &-swap {
     $trans: 30px; // 移动位置