fix: 🐛 修复Transition被打断时出现显示异常的问题 (#368)

Author: Moonofweisheng

src/uni_modules/wot-design-uni/components/common/AbortablePromise.ts

@@ -0,0 +1,28 @@
+export class AbortablePromise<T> {
+  promise: Promise<T>
+  private _reject: ((res?: any) => void) | null = null
+
+  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
+    this.promise = new Promise<T>((resolve, reject) => {
+      executor(resolve, reject)
+      this._reject = reject // 保存reject方法的引用，以便在abort时调用
+    })
+  }
+  // 提供abort方法来中止Promise
+  abort(error?: any) {
+    if (this._reject) {
+      this._reject(error) // 调用reject方法来中止Promise
+    }
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
+    onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
+  ): Promise<TResult1 | TResult2> {
+    return this.promise.then(onfulfilled, onrejected)
+  }
+
+  catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult> {
+    return this.promise.catch(onrejected)
+  }
+}

src/uni_modules/wot-design-uni/components/common/util.ts

@@ -1,3 +1,5 @@
+import { AbortablePromise } from './AbortablePromise'
+
 /**
  * 生成uuid
  * @returns string
@@ -330,7 +332,7 @@ export function isNumber(value: any): value is number {
  */
 export function isPromise(value: unknown): value is Promise<any> {
   // 先将 value 断言为 object 类型
-  if (isObj(value)) {
+  if (isObj(value) && isDef(value)) {
     // 然后进一步检查 value 是否具有 then 和 catch 方法，并且它们是函数类型
     return isFunction((value as Promise<any>).then) && isFunction((value as Promise<any>).catch)
   }
@@ -417,7 +419,7 @@ export function objToStyle(styles: Record<string, any> | Record<string, any>[]):
 }
 
 export const requestAnimationFrame = (cb = () => {}) => {
-  return new Promise((resolve) => {
+  return new AbortablePromise((resolve) => {
     const timer = setInterval(() => {
       clearInterval(timer)
       resolve(true)

src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue

@@ -145,7 +145,8 @@ function buildSvg() {
  */
 function reset(option: ToastOptions) {
   if (option) {
-    show.value = isDef(option.show!) ? option.show! : false
+    show.value = isDef(option.show) ? option.show : false
+
     if (show.value) {
       iconName.value = isDef(option.iconName!) ? option.iconName! : ''
       customIcon.value = isDef(option.customIcon!) ? option.customIcon! : false

src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue

@@ -17,8 +17,9 @@ export default {
 
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch } from 'vue'
-import { isObj, requestAnimationFrame } from '../common/util'
+import { isObj, isPromise, requestAnimationFrame } from '../common/util'
 import { transitionProps } from './types'
+import { AbortablePromise } from '../common/AbortablePromise'
 
 const getClassNames = (name?: string) => {
   if (!name) {
@@ -54,7 +55,13 @@ const currentDuration = ref<number>(300)
 // 类名
 const classes = ref<string>('')
 // 用于控制enter和leave的顺序执行
-const enterPromise = ref<Promise<void> | null>(null)
+const enterPromise = ref<AbortablePromise<void> | null>(null)
+
+// 动画进入的生命周期
+const enterLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
+
+// 动画离开的生命周期
+const leaveLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
 
 const style = computed(() => {
   return `-webkit-transition-duration:${currentDuration.value}ms;transition-duration:${currentDuration.value}ms;${
@@ -75,66 +82,107 @@ onBeforeMount(() => {
 watch(
   () => props.show,
   (newVal) => {
-    observerShow(newVal)
+    handleShow(newVal)
   },
-  { deep: true, immediate: true }
+  { deep: true }
 )
 
 function handleClick() {
   emit('click')
 }
 
-function observerShow(value: boolean) {
-  value ? enter() : leave()
+function handleShow(value: boolean) {
+  if (value) {
+    handleAbortPromise()
+    enter()
+  } else {
+    leave()
+  }
+}
+/**
+ * 取消所有的promise
+ */
+function handleAbortPromise() {
+  isPromise(enterPromise.value) && enterPromise.value.abort()
+  isPromise(enterLifeCyclePromises.value) && enterLifeCyclePromises.value.abort()
+  isPromise(leaveLifeCyclePromises.value) && leaveLifeCyclePromises.value.abort()
+  enterPromise.value = null
+  enterLifeCyclePromises.value = null
+  leaveLifeCyclePromises.value = null
 }
 
 function enter() {
-  if (enterPromise.value) return
-  enterPromise.value = new Promise((resolve) => {
-    const classNames = getClassNames(props.name)
-    const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration
-    status.value = 'enter'
-    emit('before-enter')
-
-    requestAnimationFrame(() => {
+  enterPromise.value = new AbortablePromise(async (resolve) => {
+    try {
+      const classNames = getClassNames(props.name)
+      const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration
+      status.value = 'enter'
+      emit('before-enter')
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
       emit('enter')
       classes.value = classNames.enter
       currentDuration.value = duration
-      requestAnimationFrame(() => {
-        inited.value = true
-        display.value = true
-        requestAnimationFrame(() => {
-          transitionEnded.value = false
-          classes.value = classNames['enter-to']
-          resolve()
-        })
-      })
-    })
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
+      inited.value = true
+      display.value = true
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
+      enterLifeCyclePromises.value = null
+      transitionEnded.value = false
+      classes.value = classNames['enter-to']
+      resolve()
+    } catch (error) {
+      /**
+       *
+       */
+    }
   })
 }
-function leave() {
-  if (!enterPromise.value) return
-  enterPromise.value.then(() => {
+async function leave() {
+  if (!enterPromise.value) {
+    transitionEnded.value = false
+    return onTransitionEnd()
+  }
+  try {
+    await enterPromise.value
     if (!display.value) return
     const classNames = getClassNames(props.name)
     const duration = isObj(props.duration) ? (props.duration as any).leave : props.duration
     status.value = 'leave'
     emit('before-leave')
+    currentDuration.value = duration
+    leaveLifeCyclePromises.value = requestAnimationFrame()
+    await leaveLifeCyclePromises.value
+    emit('leave')
+    classes.value = classNames.leave
+    leaveLifeCyclePromises.value = requestAnimationFrame()
+    await leaveLifeCyclePromises.value
+    transitionEnded.value = false
+    classes.value = classNames['leave-to']
+    leaveLifeCyclePromises.value = setPromise(currentDuration.value)
+    await leaveLifeCyclePromises.value
+    leaveLifeCyclePromises.value = null
+    onTransitionEnd()
+    enterPromise.value = null
+  } catch (error) {
+    /**
+     *
+     */
+  }
+}
 
-    requestAnimationFrame(() => {
-      emit('leave')
-      classes.value = classNames.leave
-      currentDuration.value = duration
-
-      requestAnimationFrame(() => {
-        transitionEnded.value = false
-        setTimeout(() => {
-          onTransitionEnd()
-          enterPromise.value = null
-        }, currentDuration.value)
-        classes.value = classNames['leave-to']
-      })
-    })
+/**
+ * 定时器promise化
+ * @param duration 持续时间ms
+ */
+function setPromise(duration: number) {
+  return new AbortablePromise<void>((resolve) => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      resolve()
+    }, duration)
   })
 }
 function onTransitionEnd() {
@@ -148,6 +196,7 @@ function onTransitionEnd() {
     // 进入后触发
     emit('after-enter')
   }
+
   if (!props.show && display.value) {
     display.value = false
   }