fix:修复transition组件enter、leave事件无效

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
             }
         }
     }
-}
+}