[Improvement] Collapse: add transition animation (#1500)

packages/collapse-item/index.vue

@@ -8,15 +8,18 @@
     <cell :class="b('title')" is-link @click="onClick">
       <slot name="title">{{ title }}</slot>
     </cell>
-    <div v-show="expanded" :class="b('content')">
-      <slot />
+    <div v-show="show" ref="wrapper" :class="b('wrapper')" @transitionend="onTransitionEnd">
+      <div ref="content" :class="b('content')">
+        <slot />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import findParent from '../mixins/find-parent';
+import { raf } from '../utils/raf';
 import create from '../utils/create';
+import findParent from '../mixins/find-parent';
 
 export default create({
   name: 'collapse-item',
@@ -28,6 +31,12 @@ export default create({
     title: String
   },
 
+  data() {
+    return {
+      show: null
+    };
+  },
+
   computed: {
     items() {
       return this.parent.items;
@@ -42,6 +51,10 @@ export default create({
     },
 
     expanded() {
+      if (!this.parent) {
+        return null;
+      }
+
       const { value } = this.parent;
       return this.parent.accordion
         ? value === this.currentName
@@ -52,17 +65,52 @@ export default create({
   created() {
     this.findParent('van-collapse');
     this.items.push(this);
+    this.show = this.expanded;
   },
 
   destroyed() {
     this.items.splice(this.index, 1);
   },
 
+  watch: {
+    expanded(expanded, prev) {
+      if (prev === null) {
+        return;
+      }
+
+      if (expanded) {
+        this.show = true;
+      }
+
+      this.$nextTick(() => {
+        const { content, wrapper } = this.$refs;
+        if (!content || !wrapper) {
+          return;
+        }
+
+        const contentHeight = content.clientHeight + 'px';
+        wrapper.style.height = expanded ? 0 : contentHeight;
+        raf(() => {
+          wrapper.style.height = expanded ? contentHeight : 0;
+        });
+      });
+    }
+  },
+
   methods: {
     onClick() {
       const { parent } = this;
       const name = parent.accordion && this.currentName === parent.value ? '' : this.currentName;
-      this.parent.switch(name, !this.expanded);
+      const expanded = !this.expanded;
+      this.parent.switch(name, expanded);
+    },
+
+    onTransitionEnd() {
+      if (!this.expanded) {
+        this.show = false;
+      } else {
+        this.$refs.wrapper.style.height = null;
+      }
     }
   }
 });