fix(collapse): refactor with animation to improve performance (#3401)

fix #3279

packages/collapse-item/index.less

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

packages/collapse-item/index.ts

@@ -1,14 +1,12 @@
 import { VantComponent } from '../common/component';
 
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
-
 VantComponent({
   classes: ['title-class', 'content-class'],
 
   relation: {
     name: 'collapse',
     type: 'ancestor',
-    current: 'collapse-item',
+    current: 'collapse-item'
   },
 
   props: {
@@ -21,32 +19,29 @@ VantComponent({
     clickable: Boolean,
     border: {
       type: Boolean,
-      value: true,
+      value: true
     },
     isLink: {
       type: Boolean,
-      value: true,
+      value: true
-    },
+    }
   },
 
   data: {
-    contentHeight: 0,
+    expanded: false
-    expanded: false,
+  },
-    transition: false,
+
+  created() {
+    this.animate = wx.createAnimation({
+      duration: 0,
+      timingFunction: 'ease-in-out'
+    });
   },
 
   mounted() {
-    this.updateExpanded()
+    this.updateExpanded();
-      .then(nextTick)
-      .then(() => {
-        const data: Record<string, boolean | string> = { transition: true };
 
-        if (this.data.expanded) {
+    this.inited = true;
-          data.contentHeight = 'auto';
-        }
-
-        this.setData(data);
-      });
   },
 
   methods: {
@@ -66,33 +61,51 @@ VantComponent({
         ? value === currentName
         : (value || []).some((name: string | number) => name === currentName);
 
-      const stack = [];
-
       if (expanded !== this.data.expanded) {
-        stack.push(this.updateStyle(expanded));
+        this.updateStyle(expanded);
       }
 
-      stack.push(this.set({ index, expanded }));
+      this.setData({ index, expanded });
-
-      return Promise.all(stack);
     },
 
     updateStyle(expanded: boolean) {
-      return this.getRect('.van-collapse-item__content')
+      const { inited } = this;
+      this.getRect('.van-collapse-item__content')
         .then(
           (rect: WechatMiniprogram.BoundingClientRectCallbackResult) =>
             rect.height
         )
         .then((height: number) => {
+          const { animate } = this;
+
           if (expanded) {
-            return this.set({
+            animate
-              contentHeight: height ? `${height}px` : 'auto',
+              .height(height)
+              .top(1)
+              .step({
+                duration: inited ? 300 : 1
+              })
+              .height('auto')
+              .step();
+
+            this.setData({
+              animate: this.animate.export()
             });
+            return;
           }
 
-          return this.set({ contentHeight: `${height}px` })
+          animate
-            .then(nextTick)
+            .height(height)
-            .then(() => this.set({ contentHeight: 0 }));
+            .top(0)
+            .step({ duration: 1 })
+            .height(0)
+            .step({
+              duration: 300
+            });
+
+          this.setData({
+            animate: this.animate.export()
+          });
         });
     },
 
@@ -106,14 +119,6 @@ VantComponent({
       const currentName = name == null ? index : name;
 
       this.parent.switch(currentName, !expanded);
-    },
-
-    onTransitionEnd() {
-      if (this.data.expanded) {
-        this.setData({
-          contentHeight: 'auto',
-        });
     }
-    },
+  }
-  },
 });

packages/collapse-item/index.wxml

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