diff --git a/uni_modules/uview-ui/components/u-transition/transition.js b/uni_modules/uview-ui/components/u-transition/transition.js index 6abe3bfc..e9c38276 100644 --- a/uni_modules/uview-ui/components/u-transition/transition.js +++ b/uni_modules/uview-ui/components/u-transition/transition.js @@ -1,7 +1,7 @@ -// 定义一个一定时间后自动成功的promise,让调用nextTick方法处,进入下一个then方法 +// 定义一个一定时间后自动成功的promise,让调用nextTick方法处,进入下一个then方法 const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50)) // nvue动画模块实现细节抽离在外部文件 -import animationMap from './nvue.ani-map.js' +import animationMap from './nvue.ani-map.js' // #ifndef APP-NVUE // 定义类名,通过给元素动态切换类名,赋予元素一定的css动画样式 @@ -23,7 +23,7 @@ const getStyle = (name) => animationMap[name] export default { methods: { // 组件被点击发出事件 - clickHandler() { + clickHandler() { this.$emit('click') }, // #ifndef APP-NVUE @@ -34,19 +34,20 @@ export default { // 定义状态和发出动画进入前事件 this.status = 'enter' this.$emit('beforeEnter') - this.inited = true - this.display = true - this.classes = classNames.enter - this.$nextTick(async () => { - // #ifdef H5 - await uni.$u.sleep(20) - // #endif - // 组件动画进入后触发的事件 - this.$emit('afterEnter') - // 标识动画尚未结束 - this.transitionEnded = false - // 赋予组件enter-to类名 - this.classes = classNames['enter-to'] + this.inited = true + this.display = true + this.classes = classNames.enter + this.$nextTick(async () => { + // #ifdef H5 + await uni.$u.sleep(20) + // #endif + // 标识动画尚未结束 + this.$emit('enter') + this.transitionEnded = false + // 组件动画进入后触发的事件 + this.$emit('afterEnter') + // 赋予组件enter-to类名 + this.classes = classNames['enter-to'] }) }, // 动画离场处理 @@ -56,16 +57,17 @@ export default { const classNames = getClassNames(this.mode) // 标记离开状态和发出事件 this.status = 'leave' - this.$emit('beforeLeave') - // 获得类名 - this.classes = classNames.leave - - this.$nextTick(() => { - // 标记动画已经结束了 - this.transitionEnded = false - // 组件执行动画,到了执行的执行时间后,执行一些额外处理 - setTimeout(this.onTransitionEnd, this.duration) - this.classes = classNames['leave-to'] + this.$emit('beforeLeave') + // 获得类名 + this.classes = classNames.leave + + this.$nextTick(() => { + // 动画正在离场的状态 + this.transitionEnded = false + this.$emit('leave') + // 组件执行动画,到了执行的执行时间后,执行一些额外处理 + setTimeout(this.onTransitionEnd, this.duration) + this.classes = classNames['leave-to'] }) }, // #endif @@ -79,34 +81,34 @@ export default { this.$emit('beforeEnter') // 展示生成组件元素 this.inited = true - this.display = true - // 在nvue安卓上,由于渲染速度慢,在弹窗,键盘,日历等组件中,渲染其中的内容需要时间 + this.display = true + // 在nvue安卓上,由于渲染速度慢,在弹窗,键盘,日历等组件中,渲染其中的内容需要时间 // 导致出现弹窗卡顿,这里让其一开始为透明状态,等一定时间渲染完成后,再让其隐藏起来,再让其按正常逻辑出现 this.viewStyle = { opacity: 0 - } + } // 等待弹窗内容渲染完成 - this.$nextTick(() => { - // 合并样式 - this.viewStyle = currentStyle.enter - Promise.resolve() - .then(nextTick) - .then(() => { - // 组件开始进入前的事件 - this.$emit('enter') - // nvue的transition动画模块需要通过ref调用组件,注意此处的ref不同于vue的this.$refs['u-transition']用法 - animation.transition(this.$refs['u-transition'].ref, { - styles: currentStyle['enter-to'], - duration: this.duration, - timingFunction: this.timingFunction, - needLayout: false, - delay: 0 - }, () => { - // 动画执行完毕,发出事件 - this.$emit('afterEnter') - }) - }) - .catch(() => {}) + this.$nextTick(() => { + // 合并样式 + this.viewStyle = currentStyle.enter + Promise.resolve() + .then(nextTick) + .then(() => { + // 组件开始进入前的事件 + this.$emit('enter') + // nvue的transition动画模块需要通过ref调用组件,注意此处的ref不同于vue的this.$refs['u-transition']用法 + animation.transition(this.$refs['u-transition'].ref, { + styles: currentStyle['enter-to'], + duration: this.duration, + timingFunction: this.timingFunction, + needLayout: false, + delay: 0 + }, () => { + // 动画执行完毕,发出事件 + this.$emit('afterEnter') + }) + }) + .catch(() => {}) }) }, nvueLeave() { @@ -133,7 +135,7 @@ export default { needLayout: false, delay: 0 }, () => { - this.onTransitionEnd() + this.onTransitionEnd() }) }) .catch(() => {}) @@ -148,8 +150,8 @@ export default { this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter') if (!this.show && this.display) { this.display = false - this.inited = false + this.inited = false } } } -} +}