From bbae67caa15570e803399f0210c43ab8b8df37f3 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 12 Oct 2019 13:18:34 +0800
Subject: [PATCH] feat(fade-in-height-expand-transition)

---
 packages/common/Collapse/src/CollapseItem.vue | 26 ++-------
 .../FadeInHeightExpandTransition.vue          | 54 +++++++++++++++++++
 2 files changed, 59 insertions(+), 21 deletions(-)
 create mode 100644 packages/transition/FadeInHeightExpandTransition.vue

diff --git a/packages/common/Collapse/src/CollapseItem.vue b/packages/common/Collapse/src/CollapseItem.vue
index 745fa90d9..dfa8d9554 100644
--- a/packages/common/Collapse/src/CollapseItem.vue
+++ b/packages/common/Collapse/src/CollapseItem.vue
@@ -14,12 +14,7 @@
     >
       <n-icon type="ios-arrow-forward" />{{ title }}
     </div>
-    <transition
-      name="n-fade-in-height-expand"
-      @enter="handleEnter"
-      @after-enter="handleAfterEnter"
-      @leave="handleLeave"
-    >
+    <fade-in-height-expand-transition>
       <div
         v-if="!collapse"
         ref="contentContainer"
@@ -32,18 +27,20 @@
           <slot />
         </div>
       </div>
-    </transition>
+    </fade-in-height-expand-transition>
   </div>
 </template>
 
 <script>
 import NIcon from '../../Icon'
 import registerable from '../../../mixins/registerable'
+import FadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition'
 
 export default {
   name: 'NCollapseItem',
   components: {
-    NIcon
+    NIcon,
+    FadeInHeightExpandTransition
   },
   mixins: [registerable('NCollapse', 'collectedItemNames', 'name')],
   inject: {
@@ -74,19 +71,6 @@ export default {
     }
   },
   methods: {
-    handleEnter () {
-      this.$refs.contentContainer.style.maxHeight = 0
-      this.$el.getBoundingClientRect()
-      this.$refs.contentContainer.style.maxHeight = this.$refs.content.offsetHeight + 'px'
-    },
-    handleAfterEnter () {
-      this.$refs.contentContainer.style.maxHeight = null
-    },
-    handleLeave () {
-      this.$refs.contentContainer.style.maxHeight = this.$refs.content.offsetHeight + 'px'
-      this.$el.getBoundingClientRect()
-      this.$refs.contentContainer.style.maxHeight = 0
-    },
     handleClick () {
       if (this.NCollapse) {
         this.NCollapse.toggleItem(this.collapse, this.name)
diff --git a/packages/transition/FadeInHeightExpandTransition.vue b/packages/transition/FadeInHeightExpandTransition.vue
new file mode 100644
index 000000000..b580b842c
--- /dev/null
+++ b/packages/transition/FadeInHeightExpandTransition.vue
@@ -0,0 +1,54 @@
+<script>
+export default {
+  props: {
+    transitionDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  beforeDestroy () {
+    if (this.transitionDisabled) {
+      const parent = this.$el.parentElement
+      if (parent) parent.removeChild(this.$el)
+    }
+  },
+  methods: {
+    handleBeforeLeave () {
+      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
+      this.$el.getBoundingClientRect()
+    },
+    handleEnter () {
+      this.$nextTick().then(() => {
+        this.$el.style.height = this.$el.offsetHeight + 'px'
+        this.$el.style.maxHeight = 0
+        this.$el.getBoundingClientRect()
+        this.$el.style.maxHeight = this.$el.style.height
+      })
+    },
+    handleAfterEnter () {
+      this.$el.style.height = null
+      this.$el.style.maxHeight = null
+    }
+  },
+  render (h) {
+    return h('transition', {
+      props: {
+        name: 'n-fade-in-height-expand'
+      },
+      on: {
+        beforeLeave: this.handleBeforeLeave,
+        leave: this.handleLeave,
+        enter: this.handleEnter,
+        afterEnter: this.handleAfterEnter
+      }
+    }, this.$slots.default)
+  }
+}
+
+</script>