chore: 1.4.17-btn.beta.0 rn bindtransitionend

Author: QiuShuiBai

packages/mpx-cube-ui/lib/components/popup/index.mpx

@@ -67,7 +67,8 @@
         wx:ref="popup-content"
         class="cube-popup-content {{ transition }}"
         wx:style="{{ [styleConfig.content, contentTranslateStyle] }}"
-        animation="{{ animationData }}">
+        animation="{{ animationData }}"
+        bindtransitionend="transitionend">
         <slot></slot>
       </view>
     </view>

packages/mpx-cube-ui/lib/components/popup/rn-mixin.js

@@ -109,12 +109,10 @@ if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'ha
                     animation[this.targetTranslate](start).step();
                 }
                 this.animationData = animation.export();
-                this.transitionendTimer = setTimeout(() => {
-                    this.transitionend();
-                }, animationOptions.duration);
             },
-            transitionend() {
-                if (this.isVisible && this.targetTranslate) {
+            transitionend(e) {
+                const { elapsedTime, finished } = e.detail;
+                if (elapsedTime && finished && this.isVisible && this.targetTranslate) {
                     // 触发重新渲染
                     this.contentTranslateStyle = {};
                 }

packages/mpx-cube-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/mpx-cube-ui",
-  "version": "1.4.12-btn.3",
+  "version": "1.4.17-btn.beta.0",
   "description": "mpx components library",
   "author": "xiaolei <xiaolei@didichuxing.com>",
   "publishConfig": {

packages/mpx-cube-ui/src/components/popup/index.mpx

@@ -67,7 +67,8 @@
         wx:ref="popup-content"
         class="cube-popup-content {{ transition }}"
         wx:style="{{ [styleConfig.content, contentTranslateStyle] }}"
-        animation="{{ animationData }}">
+        animation="{{ animationData }}"
+        bindtransitionend="transitionend">
         <slot></slot>
       </view>
     </view>

packages/mpx-cube-ui/src/components/popup/rn-mixin.ts

@@ -115,12 +115,10 @@ if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android' || __mpx_mode__ === 'ha
           animation[this.targetTranslate](start).step()
         }
         this.animationData = animation.export()
-        this.transitionendTimer = setTimeout(() => {
-          this.transitionend()
-        }, animationOptions.duration)
       },
-      transitionend() {
-        if (this.isVisible && this.targetTranslate) {
+      transitionend(e) {
+        const { elapsedTime, finished } = e.detail
+        if (elapsedTime && finished && this.isVisible && this.targetTranslate) {
           // 触发重新渲染
           this.contentTranslateStyle = {}
         }