feat(fade-in-height-expand-transition)

packages/common/Collapse/src/CollapseItem.vue

@@ -14,12 +14,7 @@
     >
       <n-icon type="ios-arrow-forward" />{{ title }}
     </div>
-    <transition
+    <fade-in-height-expand-transition>
-      name="n-fade-in-height-expand"
-      @enter="handleEnter"
-      @after-enter="handleAfterEnter"
-      @leave="handleLeave"
-    >
       <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)

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>