fix(MdTabs): correct indicator position while alignment changed (#1442)

VdustR · marcosmoura · commit c5fc2f5e190a · 2018-01-26T19:35:38.000-02:00
`setIndicatorStyles` on `transitionend` for correct position while alignment changed fix #1432
diff --git a/src/components/MdTabs/MdTabs.vue b/src/components/MdTabs/MdTabs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md-tabs" :class="[tabsClasses, $mdActiveTheme]">
-    <div class="md-tabs-navigation" :class="navigationClasses">
+    <div class="md-tabs-navigation" :class="navigationClasses" ref="navigation">
       <md-button
         v-for="({ label, props, icon, disabled, data, events }, index) in MdTabs.items"
         :key="index"
@@ -75,7 +75,8 @@
       hasContent: false,
       MdTabs: {
         items: {}
-      }
+      },
+      alignmentChanging: false
     }),
     provide () {
       return {
@@ -112,8 +113,24 @@
         this.$emit('md-changed', tab)
       },
       async mdAlignment () {
+        if (this.alignmentChanging) {
+          return false
+        }
+
+        this.alignmentChanging = true
         await this.$nextTick()
-        this.setIndicatorStyles()
+
+        let cb = event => {
+          if (event.propertyName !== 'min-width') {
+            return false
+          }
+
+          this.$refs.navigation.removeEventListener('transitionend', cb)
+          this.setIndicatorStyles()
+          this.alignmentChanging = false
+        }
+
+        this.$refs.navigation.addEventListener('transitionend', cb)
       }
     },
     methods: {
