From be1b6c69e9673f3a1a75667d75f45e04a6194bb5 Mon Sep 17 00:00:00 2001 From: rex Date: Mon, 14 Oct 2019 15:15:41 +0800 Subject: [PATCH] feat(Transition): add new lifecycle events & drop transitionend event BREAKING CHANGE: drop transitionend event fix #2071 --- example/pages/transition/index.js | 28 ++++++++++++++++++++++-- example/pages/transition/index.wxml | 6 +++++ packages/mixins/transition.ts | 34 ++++++++++++++++++++--------- packages/popup/README.md | 7 +++++- packages/transition/README.md | 11 ++++++++++ 5 files changed, 73 insertions(+), 13 deletions(-) diff --git a/example/pages/transition/index.js b/example/pages/transition/index.js index 87221029..d4cf8efd 100644 --- a/example/pages/transition/index.js +++ b/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'); + }, }); diff --git a/example/pages/transition/index.wxml b/example/pages/transition/index.wxml index fc8506d0..fa613cc1 100644 --- a/example/pages/transition/index.wxml +++ b/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" /> diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts index 09149032..a931767e 100644 --- a/packages/mixins/transition.ts +++ b/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 }); } } } diff --git a/packages/popup/README.md b/packages/popup/README.md index 5f4678c2..0ba6972d 100644 --- a/packages/popup/README.md +++ b/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 | 离开后触发 | - | ### 外部样式类 diff --git a/packages/transition/README.md b/packages/transition/README.md index 08d4a596..e71fd61f 100644 --- a/packages/transition/README.md +++ b/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 | 离开后触发 | - | + ### 外部样式类 | 类名 | 说明 |