refactor(icon-switch-transition): move to transition folder

packages/base/IconTransition/src/main.vue

@@ -1,43 +0,0 @@
-<script>
-export default {
-  name: 'NBaseIconTransition',
-  data () {
-    return {
-      appear: false
-    }
-  },
-  mounted () {
-    this.$nextTick().then(() => {
-      this.appear = true
-    })
-  },
-  render (h) {
-    return h('transition', {
-      props: {
-        name: 'n-icon-transition',
-        appear: this.appear
-      }
-    }, this.$slots.default)
-  }
-}
-</script>
-
-<style>
-.n-icon-transition-enter, .n-icon-transition-leave-to {
-  /* make sure it apply to element */
-  transform: scale(.75)!important;
-  opacity: 0;
-}
-.n-icon-transition-enter-to, .n-icon-transition-leave {
-  transform: scale(0.9999);
-  opacity: 1;
-}
-.n-icon-transition-leave-active, .n-icon-transition-enter-active {
-  transform-origin: center;
-  position: absolute;
-  left: 0;
-  top: 0;
-  transition:
-    all .3s cubic-bezier(.4, 0, .2, 1) !important;
-}
-</style>

packages/transition/FadeInHeightExpandTransition.vue

@@ -4,6 +4,10 @@ export default {
     transitionDisabled: {
       type: Boolean,
       default: false
+    },
+    width: {
+      type: Boolean,
+      default: false
     }
   },
   beforeDestroy () {
@@ -14,13 +18,21 @@ export default {
   },
   methods: {
     handleBeforeLeave () {
-      this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
-      this.$el.style.height = this.$el.offsetHeight + 'px'
+      if (this.width) {
+        this.$el.style.maxWidth = this.$el.offsetWidth + 'px'
+        this.$el.style.width = this.$el.offsetWidth + 'px'
+      } else {
+        this.$el.style.maxHeight = this.$el.offsetHeight + 'px'
+        this.$el.style.height = this.$el.offsetHeight + 'px'
+      }
       this.$el.getBoundingClientRect()
     },
     handleLeave () {
-      // debugger
-      this.$el.style.maxHeight = 0
+      if (this.width) {
+        this.$el.style.maxWidth = 0
+      } else {
+        this.$el.style.maxHeight = 0
+      }
       this.$el.getBoundingClientRect()
     },
     handleAfterLeave () {
@@ -28,21 +40,38 @@ export default {
     },
     handleEnter () {
       this.$nextTick().then(() => {
-        this.$el.style.height = this.$el.offsetHeight + 'px'
-        this.$el.style.maxHeight = 0
+        if (this.width) {
+          this.$el.style.width = this.$el.offsetWidth + 'px'
+          this.$el.style.maxWidth = 0
+        } else {
+          this.$el.style.height = this.$el.offsetHeight + 'px'
+          this.$el.style.maxHeight = 0
+        }
+        this.$el.style.transition = 'none'
         this.$el.getBoundingClientRect()
-        this.$el.style.maxHeight = this.$el.style.height
+        this.$el.style.transition = null
+        this.$el.getBoundingClientRect()
+        if (this.width) {
+          this.$el.style.maxWidth = this.$el.style.width
+        } else {
+          this.$el.style.maxHeight = this.$el.style.height
+        }
       })
     },
     handleAfterEnter () {
-      this.$el.style.height = null
-      this.$el.style.maxHeight = null
+      if (this.width) {
+        this.$el.style.width = null
+        this.$el.style.maxWidth = null
+      } else {
+        this.$el.style.height = null
+        this.$el.style.maxHeight = null
+      }
     }
   },
   render (h) {
     return h('transition', {
       props: {
-        name: 'n-fade-in-height-expand'
+        name: this.width ? 'n-fade-in-width-expand' : 'n-fade-in-height-expand'
       },
       on: {
         beforeLeave: this.handleBeforeLeave,

packages/transition/IconSwitchTransition/src/main.vue

@@ -0,0 +1,23 @@
+<script>
+export default {
+  name: 'NBaseIconTransition',
+  data () {
+    return {
+      appear: false
+    }
+  },
+  mounted () {
+    this.$nextTick().then(() => {
+      this.appear = true
+    })
+  },
+  render (h) {
+    return h('transition', {
+      props: {
+        name: 'n-icon-switch',
+        appear: this.appear
+      }
+    }, this.$slots.default)
+  }
+}
+</script>