[Tabs] Add default fade effect and transition-duration prop.

Author: wxsms

docs/pages/components/Tabs.md

@@ -144,10 +144,11 @@ Add `justified` to `<tabs>` to use justified style.
 
 ### Props
 
-Name             | Type       | Default  | Required | Description
----------------- | ---------- | -------- | -------- | -----------------------
-`v-model`        | Number     |          |          | The current tab index, use this to manual change tab index.
-`justified`      | Boolean    | false    |          | Use justified style.
+Name                  | Type       | Default  | Required | Description
+----------------      | ---------- | -------- | -------- | -----------------------
+`v-model`             | Number     |          |          | The current tab index, use this to manual change tab index.
+`justified`           | Boolean    | false    |          | Use justified style.
+`transition-duration` | Number     | 150      |          | The tabs show / hide transition time in ms. Use 0 to disable transitions.
 
 ### Slots
 

src/components/tabs/Tab.vue

@@ -1,43 +1,72 @@
 <template>
-  <div class="tab-pane" role="tabpanel" :class="{active:active}" v-show="active">
+  <div class="tab-pane" :class="{fade: transition > 0}" role="tabpanel">
     <slot></slot>
   </div>
 </template>
 
 <script>
+  import domUtils from '../../utils/domUtils'
+
+  const ACTIVE_CLASS = 'active'
+  const IN_CLASS = 'in'
+
   export default {
     props: {
       title: {
         type: String,
-        'default': 'Tab Title'
+        default: 'Tab Title'
       },
       htmlTitle: {
         type: Boolean,
-        'default': false
+        default: false
       },
       disabled: {
         type: Boolean,
-        'default': false
+        default: false
       },
       group: {
         type: String
       },
       pullRight: {
         type: Boolean,
-        'default': false
+        default: false
       }
     },
     data () {
       return {
-        active: true
+        active: true,
+        transition: 150
+      }
+    },
+    watch: {
+      active (active) {
+        if (active) {
+          setTimeout(() => {
+            domUtils.addClass(this.$el, ACTIVE_CLASS)
+            this.$el.offsetHeight
+            domUtils.addClass(this.$el, IN_CLASS)
+          }, this.transition)
+        } else {
+          domUtils.removeClass(this.$el, IN_CLASS)
+          setTimeout(() => {
+            domUtils.removeClass(this.$el, ACTIVE_CLASS)
+          }, this.transition)
+        }
       }
     },
     created () {
-      let self = this
       try {
-        self.$parent.tabs.push(self)
+        this.$parent.tabs.push(this)
       } catch (e) {
-        throw new Error('Tab parent must be Tabs.')
+        throw new Error('<tab> parent must be <tabs>.')
+      }
+    },
+    methods: {
+      show () {
+        this.$nextTick(() => {
+          domUtils.addClass(this.$el, ACTIVE_CLASS)
+          domUtils.addClass(this.$el, IN_CLASS)
+        })
       }
     }
   }

src/components/tabs/Tabs.vue

@@ -42,6 +42,10 @@
       justified: {
         type: Boolean,
         default: false
+      },
+      transitionDuration: {
+        type: Number,
+        default: 150
       }
     },
     data () {
@@ -61,6 +65,12 @@
         this.activeIndex = this.value
       }
       if (this.tabs.length) {
+        this.tabs.forEach((tab, i) => {
+          tab.transition = this.transitionDuration
+          if (i === this.activeIndex) {
+            tab.show()
+          }
+        })
         this.selectCurrent()
       }
     },

test/unit/specs/Tabs.spec.js

@@ -88,6 +88,7 @@ describe('Tabs', () => {
     expect(activeContent[0].textContent).to.contain('tab1')
     utils.triggerEvent(nav.querySelectorAll('li')[0].querySelector('a'), 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     activeTab = nav.querySelectorAll('.active')
     expect(activeTab.length).to.equal(1)
     expect(activeTab[0].querySelector('a').textContent).to.equal('tab0')
@@ -117,9 +118,11 @@ describe('Tabs', () => {
     let tab = nav.querySelectorAll('li')[1].querySelector('a')
     utils.triggerEvent(tab, 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     // Double click should be fine
     utils.triggerEvent(tab, 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     let activeTab = nav.querySelectorAll('.active')
     expect(activeTab.length).to.equal(1)
     expect(activeTab[0].querySelector('a').textContent).to.equal('Profile')
@@ -137,6 +140,7 @@ describe('Tabs', () => {
     expect(tab1.className).to.equal('disabled')
     utils.triggerEvent(tab1.querySelector('a'), 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     expect(tab1.className).to.equal('disabled')
     let activeContent = content.querySelectorAll('.tab-pane.active')
     expect(activeContent.length).to.equal(1)
@@ -146,6 +150,7 @@ describe('Tabs', () => {
     expect(tab2.className).to.equal('disabled')
     utils.triggerEvent(tab2.querySelector('a'), 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     expect(tab2.className).to.equal('disabled')
     activeContent = content.querySelectorAll('.tab-pane.active')
     expect(activeContent.length).to.equal(1)
@@ -169,6 +174,7 @@ describe('Tabs', () => {
     let spy = sinon.spy(window, 'alert')
     utils.triggerEvent(nav.querySelectorAll('li')[2].querySelector('a'), 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     sinon.assert.called(spy)
     window.alert = _savedAlert
   })
@@ -180,11 +186,13 @@ describe('Tabs', () => {
     let tab5 = nav.querySelector('li.dropdown')
     utils.triggerEvent(tab5.querySelectorAll('a')[0], 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     expect(tab5.querySelector('.dropdown-menu')).to.exist
     expect(tab5.className).to.contain('dropdown')
     expect(tab5.className).to.contain('open')
     utils.triggerEvent(tab5.querySelector('.dropdown-menu').querySelector('li').querySelector('a'), 'click')
     await vm.$nextTick()
+    await utils.sleep(350)
     expect(tab5.className).to.contain('active')
     let activeContent = content.querySelectorAll('.tab-pane.active')
     expect(activeContent.length).to.equal(1)