From 50359a79c9933d1509ca82e8e69a478d9c741fb5 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 16 Dec 2019 16:35:59 +0800
Subject: [PATCH] refactor(icon-switch-transition): move to transition folder

---
 packages/base/IconTransition/src/main.vue     | 43 ----------------
 .../FadeInHeightExpandTransition.vue          | 49 +++++++++++++++----
 .../IconSwitchTransition}/index.js            |  0
 .../IconSwitchTransition/src/main.vue         | 23 +++++++++
 4 files changed, 62 insertions(+), 53 deletions(-)
 delete mode 100644 packages/base/IconTransition/src/main.vue
 rename packages/{base/IconTransition => transition/IconSwitchTransition}/index.js (100%)
 create mode 100644 packages/transition/IconSwitchTransition/src/main.vue

diff --git a/packages/base/IconTransition/src/main.vue b/packages/base/IconTransition/src/main.vue
deleted file mode 100644
index 254a9d14c..000000000
--- a/packages/base/IconTransition/src/main.vue
+++ /dev/null
@@ -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>
diff --git a/packages/transition/FadeInHeightExpandTransition.vue b/packages/transition/FadeInHeightExpandTransition.vue
index 3bccace12..d8d03aed2 100644
--- a/packages/transition/FadeInHeightExpandTransition.vue
+++ b/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,
diff --git a/packages/base/IconTransition/index.js b/packages/transition/IconSwitchTransition/index.js
similarity index 100%
rename from packages/base/IconTransition/index.js
rename to packages/transition/IconSwitchTransition/index.js
diff --git a/packages/transition/IconSwitchTransition/src/main.vue b/packages/transition/IconSwitchTransition/src/main.vue
new file mode 100644
index 000000000..395c4a6a1
--- /dev/null
+++ b/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>