@tuya-miniapp/smart-ui 2.3.0-beta-8 → 2.3.0-beta-10

package/dist/circle/index.js

@@ -9,13 +9,12 @@ function percentToDecimal(percent) {
     percent = percent.replace('%', '');
     return percent / 100;
 }
+const idListRef = {
+    value: [],
+};
 SmartComponent({
     props: {
         className: String,
-        canvasId: {
-            type: String,
-            value: 'circle_' + Date.now(),
-        },
         customStyle: String,
         size: {
             type: String,
@@ -44,7 +43,9 @@ SmartComponent({
             type: Number,
             value: 0,
             observer(val) {
-                this.render(val);
+                if (this.data.canvasId) {
+                    this.render(val, this.data.canvasId);
+                }
             },
         },
         mode: {
@@ -57,7 +58,44 @@ SmartComponent({
             value: true,
         },
     },
+    data: {
+        canvasId: '',
+        dpr: 1,
+    },
+    created() {
+        this.initId();
+        this.initRate();
+    },
+    mounted() {
+        this.render(this.data.percent, this.data.canvasId);
+    },
+    destroyed() {
+        idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
+    },
     methods: {
+        initId() {
+            if (this.data.canvasId)
+                return;
+            const id = `smart-ui-circle_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`;
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        initRate() {
+            wx.getSystemInfo({
+                success: res => {
+                    const dpr = res.pixelRatio; // 获取设备像素比
+                    this.setData({
+                        dpr: dpr,
+                    });
+                },
+            });
+        },
         renderAll(canvas, ctx, progress, ops = {
             lineCap: 'round',
         }) {
@@ -97,6 +135,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -141,6 +180,7 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
@@ -196,24 +236,29 @@ SmartComponent({
                 }
                 ctx.setLineCap(ops.lineCap); // 设置圆角效果
                 ctx.stroke();
+                ctx.scale(canvas.dpr, canvas.dpr);
                 ctx.draw();
             }
             // 示例：绘制不同的进度条
             drawProgressBar(progress, canvas.fillColor); // 25%的蓝色进度条
         },
-        render(val) {
+        render(val, canvasId) {
             // @ts-ignore
-            const context = ty.createCanvasContext(this.data.canvasId);
+            const context = ty.createCanvasContext(canvasId);
             const sizeVal = this.parseSize();
             const params = {
-                width: sizeVal,
-                height: sizeVal,
+                canvasWidth: +sizeVal,
+                canvasHeight: +sizeVal,
+                width: +sizeVal,
+                height: +sizeVal,
                 lineWidth: this.data.trackWidth,
                 trackColor: this.data.trackColor,
                 fillColor: this.data.fillColor,
                 fillColorStops: this.data.fillColorStops,
                 maskColor: this.data.maskColor,
+                dpr: this.data.dpr,
             };
+            this.setData(params);
             if (this.data.mode === 'basic') {
                 this.renderAll(params, context, val / 100, this.data.round ? { lineCap: 'round' } : { lineCap: '' });
             }

package/dist/circle/index.wxml

@@ -1 +1,9 @@
-<canvas class="smart-progress-circle" type="2d" canvas-id="{{canvasId}}" style="width: {{size}}; height:{{size}};"></canvas>
+<canvas 
+  class="smart-progress-circle" 
+  type="2d" 
+  wx:if="{{canvasId}}" 
+  width="{{ canvasWidth * dpr }}"
+  height="{{ canvasHeight * dpr }}"
+  canvas-id="{{canvasId}}" 
+  style="width: {{width}}px; height:{{height}}px;"
+></canvas>

package/dist/common/appLog.js

@@ -13,7 +13,7 @@ export const init = (tag) => {
     }
     // @ts-ignore
     if (!ty.getLogManager) {
-        console.warn('不支持ty.getLogManager');
+        // console.warn('不支持ty.getLogManager');
         return null;
     }
     // @ts-ignore
@@ -39,7 +39,7 @@ export const info = (data, devId) => {
             // console.log('success ty.Log', res);
         },
         failure(err) {
-            console.log('fail ty.Log', err);
+            // console.log('fail ty.Log', err);
         },
     });
 };
@@ -57,10 +57,10 @@ export const warn = (data, devId) => {
     Log.debug({
         message: data,
         success(res) {
-            console.log('success ty.debug', res);
+            // console.log('success ty.debug', res);
         },
         failure(err) {
-            console.log('fail ty.debug', err);
+            // console.log('fail ty.debug', err);
         },
     });
 };
@@ -91,10 +91,10 @@ export const error = (data, devId) => {
     Log.error({
         message: _data,
         success(res) {
-            console.log('success ty.error', res);
+            // console.log('success ty.error', res);
         },
         failure(err) {
-            console.log('fail ty.error', err);
+            // console.log('fail ty.error', err);
         },
     });
 };

package/dist/common/utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
 /// <reference types="miniprogram-api-typings" />
@@ -8,7 +7,7 @@ export { getSystemInfoSync } from './version';
 export declare function range(num: number, min: number, max: number): number;
 export declare function nextTick(cb: (...args: any[]) => void): void;
 export declare function addUnit(value?: string | number): string | undefined;
-export declare function requestAnimationFrame(cb: () => void): NodeJS.Timeout;
+export declare function requestAnimationFrame(cb?: () => void): Promise<void>;
 export declare function pickExclude(obj: unknown, keys: string[]): {};
 export declare function getRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
 export declare function getAllRect(context: WechatMiniprogram.Component.TrivialInstance, selector: string): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;

package/dist/common/utils.js

@@ -23,9 +23,12 @@ export function addUnit(value) {
     return isNumber(value) ? `${value}px` : value;
 }
 export function requestAnimationFrame(cb) {
-    return setTimeout(() => {
-        cb();
-    }, 1000 / 30);
+    return new Promise(resolve => {
+        setTimeout(() => {
+            cb === null || cb === void 0 ? void 0 : cb();
+            resolve();
+        }, 1000 / 30);
+    });
 }
 export function pickExclude(obj, keys) {
     if (!isPlainObject(obj)) {

package/dist/datetime-picker/index.js

@@ -114,6 +114,9 @@ SmartComponent({
         },
         formatterFunc(type, value, data) {
             var _a, _b;
+            if (type === 'part') {
+                return value === 0 ? data.amText : data.pmText;
+            }
             const { formatterMap, formatter = defaultFormatter } = (_a = this === null || this === void 0 ? void 0 : this.data) !== null && _a !== void 0 ? _a : data;
             const mapDetail = formatterMap === null || formatterMap === void 0 ? void 0 : formatterMap[type];
             if (typeof mapDetail === 'string') {
@@ -339,8 +342,8 @@ SmartComponent({
                     part,
                 });
                 values = [
-                    part,
-                    formatter('hour', part ? (!hour ? 12 : hour - 12) : hour, this.data),
+                    formatter('part', part, this.data),
+                    formatter('hour', part ? (!hour ? '12' : (hour - 12).toString().padStart(2, '0')) : hour, this.data),
                     formatter('minute', minute, this.data),
                 ];
             }

package/dist/dialog/dialog.js

@@ -82,6 +82,7 @@ const Dialog = (options) => {
     prom.catch(err => {
         appLog.info(`Dialog promise Error`, err);
         console.log(err, '---Dialog-error');
+        queueRef.value = [];
     });
     return prom;
 };

package/dist/dialog/index.js

@@ -191,5 +191,12 @@ SmartComponent({
                 callback(actionType, this);
             }
         },
+        // 兜底防止 通过api方式打开组件失败 导致队列没有清除
+        onPopUpError() {
+            const { callback, actionType } = this.data;
+            if (callback) {
+                callback(actionType, this);
+            }
+        },
     },
 });

package/dist/dialog/index.wxml

@@ -17,6 +17,8 @@
   bind:before-leave="onBeforeLeave"
   bind:leave="onLeave"
   bind:after-leave="onAfterLeave"
+  bind:enter-error="onPopUpError"
+  bind:leave-error="onPopUpError"
 >
   <view
     wx:if="{{ title || useTitleSlot }}"

package/dist/mixins/transition.js

@@ -1,5 +1,13 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 // @ts-nocheck
-import appLog from '../common/appLog';
 import { requestAnimationFrame } from '../common/utils';
 import { isObj } from '../common/validator';
 const getClassNames = (name) => ({
@@ -32,6 +40,8 @@ export function transition(showDefaultValue) {
             type: '',
             inited: false,
             display: false,
+            animating: false,
+            status: '',
         },
         ready() {
             if (this.data.show === true) {
@@ -40,110 +50,102 @@ export function transition(showDefaultValue) {
         },
         methods: {
             observeShow(value, old) {
-                appLog.info(`transition component observeShow value: ${value};old: ${old}`);
                 if (value === old) {
                     return;
                 }
                 value ? this.enter() : this.leave();
             },
             enter() {
-                if (this.enterFinishedPromise)
+                if (this.enterFinishedPromise || this.data.animating)
                     return;
-                appLog.info(`transition component enter success`);
-                this.enterFinishedPromise = new Promise(resolve => {
+                this.setData({
+                    animating: true,
+                    status: 'enter',
+                });
+                // eslint-disable-next-line no-async-promise-executor
+                this.enterFinishedPromise = new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
                     const { duration, name } = this.data;
                     const classNames = getClassNames(name);
                     const currentDuration = isObj(duration) ? duration.enter : duration;
-                    if (this.status === 'enter') {
-                        return;
-                    }
-                    this.status = 'enter';
                     this.$emit('before-enter');
-                    requestAnimationFrame(() => {
-                        if (this.status !== 'enter') {
-                            return;
-                        }
-                        this.$emit('enter');
+                    yield requestAnimationFrame();
+                    this.$emit('enter');
+                    this.setData({
+                        inited: true,
+                        display: true,
+                        classes: classNames.enter,
+                        currentDuration,
+                    });
+                    yield requestAnimationFrame();
+                    this.transitionEnded = false;
+                    this.setData({ classes: classNames['enter-to'] });
+                    clearTimeout(this.timer);
+                    this.timer = setTimeout(() => {
+                        this.$emit(`after-enter`);
                         this.setData({
-                            inited: true,
-                            display: true,
-                            classes: classNames.enter,
-                            currentDuration,
+                            animating: false,
                         });
-                        requestAnimationFrame(() => {
-                            if (this.status !== 'enter') {
-                                return;
-                            }
-                            this.transitionEnded = false;
-                            appLog.info(`transition component enter transitionEnded false`);
-                            this.setData({ classes: classNames['enter-to'] });
-                            resolve();
-                        });
-                    });
-                });
+                        this.checkShowStatus();
+                    }, currentDuration + 20);
+                    resolve();
+                }));
                 this.enterFinishedPromise.catch(err => {
                     this.enterFinishedPromise = null;
-                    appLog.info(`enter enterFinishedPromise catch`, err);
+                    this.setData({ animating: false });
                     console.log(err, '---error-enter');
+                    this.$emit('enter-error', err);
                 });
             },
             leave() {
-                if (!this.enterFinishedPromise)
-                    return;
-                appLog.info(`transition component leave success`);
-                this.enterFinishedPromise
-                    .then(() => {
-                    if (!this.data.display) {
+                return __awaiter(this, void 0, void 0, function* () {
+                    if (!this.enterFinishedPromise || this.data.animating)
                         return;
-                    }
-                    const { duration, name } = this.data;
-                    const classNames = getClassNames(name);
-                    const currentDuration = isObj(duration) ? duration.leave : duration;
-                    this.status = 'leave';
-                    this.$emit('before-leave');
-                    requestAnimationFrame(() => {
-                        if (this.status !== 'leave') {
-                            return;
-                        }
+                    this.setData({
+                        animating: true,
+                        status: 'leave',
+                    });
+                    this.enterFinishedPromise
+                        .then(() => __awaiter(this, void 0, void 0, function* () {
+                        const { duration, name } = this.data;
+                        const classNames = getClassNames(name);
+                        const currentDuration = isObj(duration) ? duration.leave : duration;
+                        this.$emit('before-leave');
+                        yield requestAnimationFrame();
                         this.$emit('leave');
                         this.setData({
                             classes: classNames.leave,
                             currentDuration,
                         });
-                        requestAnimationFrame(() => {
-                            if (this.status !== 'leave') {
-                                return;
-                            }
-                            this.transitionEnded = false;
-                            appLog.info(`transition component leave transitionEnded false`);
-                            setTimeout(() => {
-                                this.enterFinishedPromise = null;
-                                appLog.info(`transition component enterFinishedPromise cleared`);
-                                this.onTransitionEnd();
-                            }, currentDuration);
-                            this.setData({ classes: classNames['leave-to'] });
-                        });
+                        yield requestAnimationFrame();
+                        this.transitionEnded = false;
+                        clearTimeout(this.timer);
+                        setTimeout(() => {
+                            this.enterFinishedPromise = null;
+                            this.$emit(`after-leave`);
+                            this.setData({
+                                display: false,
+                                animating: false,
+                            });
+                            this.checkShowStatus();
+                        }, currentDuration + 20);
+                        this.setData({ classes: classNames['leave-to'] });
+                    }))
+                        .catch(err => {
+                        this.enterFinishedPromise = null;
+                        this.setData({ animating: false });
+                        console.log(err, '---error-leave');
+                        this.$emit('leave-error', err);
                     });
-                })
-                    .catch(err => {
-                    this.enterFinishedPromise = null;
-                    appLog.info(`leave enterFinishedPromise catch`, err);
-                    console.log(err, '---error-enter');
                 });
             },
-            onTransitionEnd() {
-                appLog.info(`transition component in transitionEnded ${this.transitionEnded}`);
-                if (this.transitionEnded) {
-                    return;
-                }
-                this.transitionEnded = true;
-                appLog.info(`transition component in transitionEnded true`);
-                this.$emit(`after-${this.status}`);
-                appLog.info(`transition component onTransitionEnd ${this.status} success`);
-                const { show, display } = this.data;
-                if (!show && display) {
-                    this.setData({ display: false });
-                }
+            checkShowStatus() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const { status, show } = this.data;
+                    yield requestAnimationFrame();
+                    if ((status === 'enter' && show) || (status === 'leave' && !show))
+                        return;
+                    show ? this.enter() : this.leave();
+                });
             },
         },
     });

package/dist/popover/index.css

@@ -1 +1 @@
-@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.css';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/dist/popover/index.js

@@ -1,6 +1,5 @@
 /* eslint-disable prefer-destructuring */
 import { SmartComponent } from '../common/component';
-import { transition } from '../mixins/transition';
 const IconSrc = (deg) => `<svg style="transform: rotate(${deg})" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18.00000052453666" height="6.000001573609978" viewBox="0 0 18.00000052453666 6.000001573609978"><g transform="matrix(-1,-8.742277657347586e-8,-8.742277657347586e-8,1,36.00000104907346,0.0000015736100241790166)"><path d="M18.026037824536658,0.006179333609978323C18.827028524536658,0.014487173609978322,19.72353052453666,0.026256673609978323,20.50303052453666,0.3038745736099783C21.34506052453666,0.6038775736099783,21.90250052453666,1.1284215736099783,22.46337052453666,1.7457315736099783C22.867160524536658,2.1897415736099783,23.66033052453666,3.137051573609978,24.04654052453666,3.5944415736099784C24.36263052453666,3.9694415736099784,24.98139052453666,4.710681573609978,25.31923052453666,5.0693015736099785C25.74452052453666,5.520461573609978,26.270210524536658,6.000001573609978,27.00036052453666,6.000001573609978C27.730510524536662,6.000001573609978,28.25600052453666,5.520461573609978,28.681000524536657,5.069761573609978C29.01880052453666,4.711371573609978,29.63760052453666,3.969671573609978,29.95390052453666,3.5949015736099783C30.33970052453666,3.137511573609978,31.13280052453666,2.1902015736099782,31.53690052453666,1.7461915736099782C32.09870052453666,1.1288815736099784,32.65520052453666,0.6043385736099783,33.49700052453666,0.3043355736099783C34.276700524536665,0.027410573609978322,35.17340052453666,0.014948673609978322,35.97390052453666,0.006640913609978322C36.811100524536656,-0.0018975863900216774,17.189137524536658,-0.0023591663900216775,18.026037824536658,0.006179333609978323Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></svg>`;
 function createSvgIcon(svg) {
     return `data:image/svg+xml,${encodeURIComponent(`<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">${svg}`)}`;
@@ -15,7 +14,6 @@ SmartComponent({
         'leave-to-class',
         'close-icon-class',
     ],
-    mixins: [transition(false)],
     props: {
         // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
         placement: {
@@ -26,9 +24,12 @@ SmartComponent({
             type: Boolean,
             observer(value) {
                 if (value !== this.data.currentShow) {
-                    this.setData({
-                        currentShow: value,
-                    });
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
                 }
             },
         },
@@ -42,10 +43,10 @@ SmartComponent({
         },
         duration: {
             type: Number,
-            value: 2000,
+            value: 20000,
         },
     },
-    data: { currentShow: false },
+    data: { currentShow: false, showStyle: '' },
     mounted() { },
     created() { },
     methods: {
@@ -157,10 +158,18 @@ SmartComponent({
             this.setData(params);
         },
         onClick() {
+            this.onOpen();
+        },
+        onOpen() {
             this.getButtonPosition();
             this.setData({
                 currentShow: true,
             });
+            setTimeout(() => {
+                this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
             this.$emit('show-change', true);
             if (this.data.duration) {
                 setTimeout(() => {
@@ -170,10 +179,15 @@ SmartComponent({
         },
         onClose() {
             this.setData({
-                currentShow: false,
+                showStyle: 'opacity: 0;',
             });
-            this.$emit('show-change', false);
-            this.$emit('close', false);
+            setTimeout(() => {
+                this.setData({
+                    currentShow: false,
+                });
+                this.$emit('show-change', false);
+                this.$emit('close', false);
+            }, 300);
         },
     },
 });

package/dist/popover/index.json

@@ -1,7 +1,6 @@
 {
   "component": true,
   "usingComponents": {
-    "smart-transition": "../transition/index",
     "smart-overlay": "../overlay/index"
   }
 }

package/dist/popover/index.wxml

@@ -12,14 +12,12 @@
    
   </smart-overlay>
 
-  <view class="smart-popover-button" id="{{popoverId}}" catch:tap="onClick">
+  <view class="smart-popover-button" catch:tap="onClick">
     <slot />
-    <smart-transition show="{{currentShow}}">
-      <view  class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}">
-        <slot name="overlay" />
-        <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
-      </view>
-    </smart-transition>
+    <view wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <view class="smart-popover-overlay-arrow" style="background-image: url('{{iconSrc}}'); transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;width: {{iconWidth}};height:{{iconHeight}};background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></view>
+    </view>
   </view>
 
 </view>

package/dist/popover/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));padding:var(--popover-padding,12px);position:absolute;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}
+@import '../common/index.wxss';.smart-popover{--overlay-background-color:transparent;position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/dist/popup/popup.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
   style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle, bottomSafeHeight }) }}"
-  bind:transitionend="onTransitionEnd"
   catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
 >
   <slot />

package/dist/transition/index.wxml

@@ -4,7 +4,6 @@
   wx:if="{{ inited }}"
   class="smart-transition custom-class {{ classes }}"
   style="{{ computed.rootStyle({ currentDuration, display, customStyle }) }}"
-  bind:transitionend="onTransitionEnd"
 >
   <slot />
 </view>