From 19083a327cc42e2c29c71dc02a7f436c16856778 Mon Sep 17 00:00:00 2001
From: johnsonwong666 <64689255+johnsonwong666@users.noreply.github.com>
Date: Mon, 15 Jan 2024 19:47:25 +0800
Subject: [PATCH] fix(Transition): fix transition event sequence (#5699)

---
 packages/mixins/transition.ts | 92 +++++++++++++++++++----------------
 1 file changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/mixins/transition.ts b/packages/mixins/transition.ts
index 55c2d1fd..7aa9d751 100644
--- a/packages/mixins/transition.ts
+++ b/packages/mixins/transition.ts
@@ -53,75 +53,81 @@ export function transition(showDefaultValue: boolean) {
       },
 
       enter() {
-        const { duration, name } = this.data;
-        const classNames = getClassNames(name);
-        const currentDuration = isObj(duration) ? duration.enter : duration;
+        this.waitEnterEndPromise = new Promise((resolve) => {
+          const { duration, name } = this.data;
+          const classNames = getClassNames(name);
+          const currentDuration = isObj(duration) ? duration.enter : duration;
 
-        if (this.status === 'enter') {
-          return;
-        }
-
-        this.status = 'enter';
-        this.$emit('before-enter');
-
-        requestAnimationFrame(() => {
-          if (this.status !== 'enter') {
+          if (this.status === 'enter') {
             return;
           }
 
-          this.$emit('enter');
-
-          this.setData({
-            inited: true,
-            display: true,
-            classes: classNames.enter,
-            currentDuration,
-          });
+          this.status = 'enter';
+          this.$emit('before-enter');
 
           requestAnimationFrame(() => {
             if (this.status !== 'enter') {
               return;
             }
 
-            this.transitionEnded = false;
-            this.setData({ classes: classNames['enter-to'] });
+            this.$emit('enter');
+
+            this.setData({
+              inited: true,
+              display: true,
+              classes: classNames.enter,
+              currentDuration,
+            });
+
+            requestAnimationFrame(() => {
+              if (this.status !== 'enter') {
+                return;
+              }
+
+              this.transitionEnded = false;
+              this.setData({ classes: classNames['enter-to'] });
+              resolve();
+            });
           });
         });
       },
 
       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');
-
-        requestAnimationFrame(() => {
-          if (this.status !== 'leave') {
+        if (!this.waitEnterEndPromise) return;
+        this.waitEnterEndPromise.then(() => {
+          if (!this.data.display) {
             return;
           }
 
-          this.$emit('leave');
+          const { duration, name } = this.data;
+          const classNames = getClassNames(name);
+          const currentDuration = isObj(duration) ? duration.leave : duration;
 
-          this.setData({
-            classes: classNames.leave,
-            currentDuration,
-          });
+          this.status = 'leave';
+          this.$emit('before-leave');
 
           requestAnimationFrame(() => {
             if (this.status !== 'leave') {
               return;
             }
 
-            this.transitionEnded = false;
-            setTimeout(() => this.onTransitionEnd(), currentDuration);
+            this.$emit('leave');
 
-            this.setData({ classes: classNames['leave-to'] });
+            this.setData({
+              classes: classNames.leave,
+              currentDuration,
+            });
+
+            requestAnimationFrame(() => {
+              if (this.status !== 'leave') {
+                return;
+              }
+
+              this.transitionEnded = false;
+              setTimeout(() => this.onTransitionEnd(), currentDuration);
+
+              this.setData({ classes: classNames['leave-to'] });
+            });
           });
         });
       },