Browse Source

fix(address): 使用css3替换GASP动画函数 (#472)

Co-authored-by: yangxiaolu3 <yangxiaolu3@jd.com>
yangxiaolu1993 4 years ago
parent
commit
0698fe4f94
3 changed files with 11 additions and 4 deletions
  1. 1 1
      package.json
  2. 1 0
      src/packages/__VUE/address/index.scss
  3. 9 3
      src/packages/__VUE/address/index.vue

+ 1 - 1
package.json

@@ -116,4 +116,4 @@
     "type": "git",
     "url": "https://github.com/jdf2e/nutui.git"
   }
-}
+}

+ 1 - 0
src/packages/__VUE/address/index.scss

@@ -54,6 +54,7 @@
         width: 26px;
         height: 3px;
         background: $address-region-tab-line;
+        transition: 0.2s all linear;
       }
     }
 

+ 9 - 3
src/packages/__VUE/address/index.vue

@@ -44,7 +44,11 @@
             <view>{{ getTabName(item, index) }}</view>
           </view>
 
-          <view class="region-tab-line" ref="regionLine"></view>
+          <view
+            class="region-tab-line"
+            ref="regionLine"
+            :style="{ left: lineDistance + 'px' }"
+          ></view>
         </view>
 
         <view class="region-con">
@@ -117,7 +121,6 @@
 import { reactive, ref, toRefs, watch, nextTick } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('address');
-import { TweenMax } from 'gsap';
 interface RegionData {
   name: string;
   [key: string]: any;
@@ -249,6 +252,8 @@ export default create({
 
     const closeWay = ref('self');
 
+    const lineDistance = ref(20);
+
     //获取已选地区列表名称
     const getTabName = (item: RegionData, index: number) => {
       if (item.name) return item.name;
@@ -277,7 +282,7 @@ export default create({
       nextTick(() => {
         if (name) {
           const distance = name.offsetLeft;
-          TweenMax.to(regionLine.value, 0.5, { left: distance });
+          lineDistance.value = distance;
         }
       });
     };
@@ -475,6 +480,7 @@ export default create({
       getTabName,
       nextAreaList,
       regionLine,
+      lineDistance,
       changeRegionTab,
       selectedExist,
       clickOverlay,