[new feature] Popup: 添加 transitionEnd 事件

example/pages/popup/index.js

@@ -11,6 +11,9 @@ Page({
     }
   },
 
+  onTransitionEnd() {
+    console.log(`You can't see me 🌚`);
+  },
   toggle(type) {
     this.setData({
       [`show.${type}`]: !this.data.show[type]

example/pages/popup/index.wxml

@@ -4,6 +4,7 @@
     show="{{ show.middle }}"
     custom-class="center"
     bind:close="togglePopup"
+    bind:transitionEnd="onTransitionEnd"
   >
     内容
   </van-popup>
@@ -17,6 +18,7 @@
     position="bottom"
     custom-class="bottom"
     bind:close="toggleBottomPopup"
+    bind:transitionEnd="onTransitionEnd"
   >
     内容
   </van-popup>
@@ -28,6 +30,7 @@
     overlay="{{ false }}"
     custom-class="top"
     bind:close="toggleTopPopup"
+    bind:transitionEnd="onTransitionEnd"
   >
     内容
   </van-popup>
@@ -38,6 +41,7 @@
     position="right"
     custom-class="right"
     bind:close="toggleRightPopup"
+    bind:transitionEnd="onTransitionEnd"
   >
     <van-button bind:click="toggleRightPopup" class="demo-margin-right">关闭弹层</van-button>
 
@@ -47,6 +51,7 @@
       position="right"
       custom-class="right"
       bind:close="toggleRightPopup2"
+      bind:transitionEnd="onTransitionEnd"
     >
       <van-button bind:click="toggleRightPopup2">关闭弹层</van-button>
     </van-popup>

packages/popup/README.md

@@ -62,6 +62,7 @@ Page({
 |-----------|-----------|-----------|
 | bind:close | 蒙层关闭时触发 | - |
 | bind:click-overlay | 点击蒙层时触发 | - |
+| bind:transitionEnd | 蒙层关闭后触发 | - |
 
 ### 外部样式类
 

packages/popup/index.ts

@@ -53,6 +53,10 @@ VantComponent({
       }
     },
 
+    onTransitionEnd() {
+      !this.data.show && this.$emit('transitionEnd');
+    },
+
     observeClass() {
       const { transition, position } = this.data;
       this.updateClasses(transition || position);