Browse Source

fix(address): 使用css3替换gasp动效 (#474)

Co-authored-by: yangxiaolu3 <yangxiaolu3@jd.com>
yangxiaolu1993 4 years ago
parent
commit
346f09f4c3
2 changed files with 6 additions and 4 deletions
  1. 1 0
      src/packages/address/address.scss
  2. 5 4
      src/packages/address/address.vue

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

@@ -59,6 +59,7 @@
         width: 26px;
         height: 3px;
         background: linear-gradient(90deg, rgba(245, 80, 58, 1) 0%, rgba(250, 209, 203, 1) 100%);
+        transition: 0.2s all linear;
       }
     }
 

+ 5 - 4
src/packages/address/address.vue

@@ -34,7 +34,7 @@
             ><span>{{ getTabName(item, index) }}</span></div
           >
 
-          <span class="region-tab-line" ref="regionLine"></span>
+          <span class="region-tab-line" ref="regionLine" :style="{ left: lineDistance + 'px' }"></span>
         </div>
 
         <div class="region-con">
@@ -80,7 +80,6 @@
 <script>
 import Popup from './../popup/popup.vue';
 import Icon from './../icon/icon.vue';
-import { TweenMax } from 'gsap';
 export default {
   name: 'nut-address',
   props: {
@@ -168,7 +167,8 @@ export default {
         town: {}
       }, //已选择的 省、市、县、镇
 
-      selectedExistAddress: {} // 当前选择的地址
+      selectedExistAddress: {}, // 当前选择的地址
+      lineDistance: 20
     };
   },
   components: {
@@ -257,7 +257,8 @@ export default {
       this.$nextTick(() => {
         if (this.$refs[name] && this.$refs[name][0]) {
           const distance = this.$refs[name][0].offsetLeft;
-          TweenMax.to(this.$refs.regionLine, 0.5, { left: distance });
+          // TweenMax.to(this.$refs.regionLine, 0.5, { left: distance });
+          this.lineDistance = distance;
         }
       });
     },