[bugfix] Collapse: improve performance & optimize initial style set

fix #1494

packages/collapse-item/index.less

@@ -27,6 +27,10 @@
 
   &__wrapper {
     overflow: hidden;
+
+    &--transition {
+      transition: height 300ms ease-in-out;
+    }
   }
 
   &__content {

packages/collapse-item/index.ts

@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
 
+const nextTick = () => new Promise(resolve => setTimeout(resolve, 20));
+
 VantComponent({
   classes: ['title-class', 'content-class'],
 
@@ -30,60 +32,60 @@ VantComponent({
 
   data: {
     contentHeight: 0,
-    expanded: false
+    expanded: false,
+    transition: false
   },
 
-  beforeCreate() {
-    this.animation = wx.createAnimation({
-      duration: 300,
-      timingFunction: 'ease-in-out'
-    });
+  mounted() {
+    this.updateExpanded()
+      .then(nextTick)
+      .then(() => {
+        this.set({ transition: true });
+      });
   },
 
   methods: {
     updateExpanded() {
       if (!this.parent) {
-        return null;
+        return Promise.resolve();
       }
 
-      const { value, accordion, items } = this.parent.data;
+      const { value, accordion } = this.parent.data;
+      const { children = [] } = this.parent;
       const { name } = this.data;
 
-      const index = items.indexOf(this);
+      const index = children.indexOf(this);
       const currentName = name == null ? index : name;
 
       const expanded = accordion
         ? value === currentName
-        : value.some(name => name === currentName);
+        : (value || []).some((name: string | number) => name === currentName);
+
+      const stack = [];
 
       if (expanded !== this.data.expanded) {
-        this.updateStyle(expanded);
+        stack.push(this.updateStyle(expanded));
       }
 
-      this.set({ index, expanded });
+      stack.push(this.set({ index, expanded }));
+
+      return Promise.all(stack);
     },
 
     updateStyle(expanded: boolean) {
-      this.getRect('.van-collapse-item__content').then(res => {
-        const animationData = this.animation
-          .height(expanded ? res.height : 0)
-          .step()
-          .export();
-        if (expanded) {
-          this.set({ animationData });
-        } else {
-          this.set(
-            {
-              contentHeight: res.height + 'px'
-            },
-            () => {
-              setTimeout(() => {
-                this.set({ animationData });
-              }, 20);
-            }
-          );
-        }
-      });
+      return this.getRect('.van-collapse-item__content')
+        .then((rect: wx.BoundingClientRectCallbackResult) => rect.height)
+        .then((height: number) => {
+          if (expanded) {
+            return this.set({
+              contentHeight: height ? `${height}px` : 'auto'
+            });
+          } else {
+            return this.set({ contentHeight: `${height}px` })
+              .then(nextTick)
+              .then(() => this.set({ contentHeight: 0 }));
+          }
+        });
     },
 
     onClick() {
@@ -92,8 +94,7 @@ VantComponent({
       }
 
       const { name, expanded } = this.data;
-
-      const index = this.parent.data.items.indexOf(this);
+      const index = this.parent.children.indexOf(this);
       const currentName = name == null ? index : name;
 
       this.parent.switch(currentName, !expanded);

packages/collapse-item/index.wxml

@@ -30,9 +30,8 @@
     />
   </van-cell>
   <view
-    class="van-collapse-item__wrapper"
+    class="{{ utils.bem('collapse-item__wrapper', { transition }) }}"
     style="height: {{ contentHeight }};"
-    animation="{{ animationData }}"
     bind:transitionend="onTransitionEnd"
   >
     <view

packages/collapse/index.ts

@@ -5,47 +5,42 @@ VantComponent({
     name: 'collapse-item',
     type: 'descendant',
     linked(child: Weapp.Component) {
-      this.set({
-        items: [...this.data.items, child]
-      }, () => {
-        child.updateExpanded();
-      });
+      this.children.push(child);
     }
   },
 
   props: {
-    value: null,
-    accordion: Boolean,
+    value: {
+      type: null,
+      observer: 'updateExpanded'
+    },
+    accordion: {
+      type: Boolean,
+      observer: 'updateExpanded'
+    },
     border: {
       type: Boolean,
       value: true
     }
   },
 
-  data: {
-    items: []
-  },
-
-  watch: {
-    value() {
-      this.data.items.forEach(child => {
-        child.updateExpanded();
-      });
-    },
-    accordion() {
-      this.data.items.forEach(child => {
-        child.updateExpanded();
-      });
-    }
+  beforeCreate() {
+    this.children = [];
   },
 
   methods: {
-    switch(name, expanded) {
+    updateExpanded() {
+      this.children.forEach((child: Weapp.Component) => {
+        child.updateExpanded();
+      });
+    },
+
+    switch(name: string | number, expanded: boolean) {
       const { accordion, value } = this.data;
       if (!accordion) {
         name = expanded
-          ? value.concat(name)
-          : value.filter(activeName => activeName !== name);
+          ? (value || []).concat(name)
+          : (value || []).filter((activeName: string | number) => activeName !== name);
       } else {
         name = expanded ? name : '';
       }