fix(Collapse): 修复没有动画效果 @rex-zsd (#1140)

packages/collapse-item/index.less

@@ -27,8 +27,6 @@
 
   &__wrapper {
     overflow: hidden;
-    will-change: max-height;
-    transition: max-height @collapse-item-transition-duration ease-in-out;
   }
 
   &__content {

packages/collapse-item/index.ts

@@ -33,6 +33,13 @@ VantComponent({
     expanded: false
   },
 
+  beforeCreate() {
+    this.animation = wx.createAnimation({
+      duration: 300,
+      timingFunction: 'ease-in-out'
+    });
+  },
+
   methods: {
     updateExpanded() {
       if (!this.parent) {
@@ -56,16 +63,27 @@ VantComponent({
       this.set({ expanded });
     },
 
-    updateStyle(expanded) {
+    updateStyle(expanded: boolean) {
-      if (expanded) {
+      this.getRect('.van-collapse-item__content').then(res => {
-        this.set({
+        const animationData = this.animation
-            contentHeight: 'auto'
+          .height(expanded ? res.height : 0)
-          });
+          .step()
-      } else {
+          .export();
-        this.set({
+        if (expanded) {
-          contentHeight: 0
+          this.set({ animationData });
-        });
+        } else {
-      }
+          this.set(
+            {
+              contentHeight: res.height + 'px'
+            },
+            () => {
+              setTimeout(() => {
+                this.set({ animationData });
+              }, 20);
+            }
+          );
+        }
+      });
     },
 
     onClick() {
@@ -79,6 +97,14 @@ VantComponent({
       const currentName = name == null ? index : name;
 
       this.parent.switch(currentName, !expanded);
+    },
+
+    onTransitionEnd() {
+      if (this.data.expanded) {
+        this.set({
+          contentHeight: 'auto'
+        });
+      }
     }
   }
 });

packages/collapse-item/index.wxml

@@ -29,7 +29,9 @@
   </van-cell>
   <view
     class="van-collapse-item__wrapper"
-    style="max-height: {{ contentHeight }};"
+    style="height: {{ contentHeight }};"
+    animation="{{ animationData }}"
+    bind:transitionend="onTransitionEnd"
   >
     <view
       class="van-collapse-item__content content-class"