feat(Transition): add new lifecycle events & drop transitionend event

BREAKING CHANGE: drop transitionend event

fix #2071

example/pages/transition/index.js

@@ -55,6 +55,30 @@ Page({
 
     setTimeout(() => {
       this.setData({ showCustom: false });
-    }, 500);
-  }
+    }, 1000);
+  },
+
+  onBeforeEnter() {
+    console.log('before enter');
+  },
+
+  onEnter() {
+    console.log('enter');
+  },
+
+  onAfterEnter() {
+    console.log('after enter');
+  },
+
+  onBeforeLeave() {
+    console.log('before leave');
+  },
+
+  onLeave() {
+    console.log('leave');
+  },
+
+  onAfterLeave() {
+    console.log('after leave');
+  },
 });

example/pages/transition/index.wxml

@@ -25,5 +25,11 @@
     enter-active-class="van-enter-active-class"
     leave-active-class="van-leave-active-class"
     leave-to-class="van-leave-to-class"
+    bind:before-enter="onBeforeEnter"
+    bind:enter="onEnter"
+    bind:after-enter="onAfterEnter"
+    bind:before-leave="onBeforeLeave"
+    bind:leave="onLeave"
+    bind:after-leave="onAfterLeave"
   />
 </demo-block>

packages/mixins/transition.ts

@@ -9,7 +9,7 @@ const getClassNames = (name: string) => ({
 
 const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 30));
 
-export const transition = function (showDefaultValue: boolean) {
+export const transition = function(showDefaultValue: boolean) {
   return Behavior({
     properties: {
       customStyle: String,
@@ -45,11 +45,7 @@ export const transition = function (showDefaultValue: boolean) {
 
     methods: {
       observeShow(value: boolean) {
-        if (value) {
-          this.enter();
-        } else {
-          this.leave();
-        }
+        value ? this.enter() : this.leave();
       },
 
       enter() {
@@ -58,11 +54,13 @@ export const transition = function (showDefaultValue: boolean) {
         const currentDuration = isObj(duration) ? duration.enter : duration;
 
         this.status = 'enter';
+        this.$emit('before-enter');
 
         Promise.resolve()
           .then(nextTick)
           .then(() => {
             this.checkStatus('enter');
+            this.$emit('enter');
 
             this.setData({
               inited: true,
@@ -74,6 +72,7 @@ export const transition = function (showDefaultValue: boolean) {
           .then(nextTick)
           .then(() => {
             this.checkStatus('enter');
+            this.transitionEnded = false;
 
             this.setData({
               classes: classNames['enter-to']
@@ -83,26 +82,34 @@ export const transition = function (showDefaultValue: boolean) {
       },
 
       leave() {
+        if (!this.data.display) {
+          return;
+        }
+
         const { duration, name } = this.data;
         const classNames = getClassNames(name);
         const currentDuration = isObj(duration) ? duration.leave : duration;
 
         this.status = 'leave';
+        this.$emit('before-leave');
 
         Promise.resolve()
           .then(nextTick)
           .then(() => {
             this.checkStatus('leave');
+            this.$emit('leave');
 
             this.setData({
               classes: classNames.leave,
               currentDuration
             });
           })
-          .then(() => setTimeout(() => this.onTransitionEnd(), currentDuration))
           .then(nextTick)
           .then(() => {
             this.checkStatus('leave');
+            this.transitionEnded = false;
+            setTimeout(() => this.onTransitionEnd(), currentDuration);
+
             this.setData({
               classes: classNames['leave-to']
             });
@@ -117,9 +124,16 @@ export const transition = function (showDefaultValue: boolean) {
       },
 
       onTransitionEnd() {
-        if (!this.data.show) {
-          this.set({ display: false });
-          this.$emit('transitionend');
+        if (this.transitionEnded) {
+          return;
+        }
+
+        this.transitionEnded = true;
+        this.$emit(`after-${this.status}`);
+
+        const { show, display } = this.data;
+        if (!show && display) {
+          this.setData({ display: false });
         }
       }
     }

packages/popup/README.md

@@ -129,7 +129,12 @@ Page({
 |-----------|-----------|-----------|
 | bind:close | 关闭弹出层时触发 | - |
 | bind:click-overlay | 点击遮罩层时触发 | - |
-| bind:transitionend | 弹出层动画结束后触发 | - |
+| bind:before-enter | 进入前触发 | - |
+| bind:enter | 进入中触发 | - |
+| bind:after-enter | 进入后触发 | - |
+| bind:before-leave | 离开前触发 | - |
+| bind:leave | 离开中触发 | - |
+| bind:after-leave | 离开后触发 | - |
 
 ### 外部样式类
 

packages/transition/README.md

@@ -70,6 +70,17 @@ transition 组件内置了多种动画，可以通过`name`字段指定动画类
 | duration | 动画时长，单位为毫秒 | *number \| object* | `300` | - |
 | custom-style | 自定义样式 | *string* | - | - |
 
+### Events
+
+| 事件名 | 说明 | 参数 |
+|-----------|-----------|-----------|
+| bind:before-enter | 进入前触发 | - |
+| bind:enter | 进入中触发 | - |
+| bind:after-enter | 进入后触发 | - |
+| bind:before-leave | 离开前触发 | - |
+| bind:leave | 离开中触发 | - |
+| bind:after-leave | 离开后触发 | - |
+
 ### 外部样式类
 
 | 类名 | 说明 |