fix(components): [message] fix consecutive closeAll method calls (#20334)

packages/components/message/src/message.vue

@@ -1,6 +1,7 @@
 <template>
   <transition
     :name="ns.b('fade')"
+    @before-enter="isStartTransition = true"
     @before-leave="onClose"
     @after-leave="$emit('destroy')"
   >
@@ -45,7 +46,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'
 import { TypeComponents, TypeComponentsMap } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
@@ -64,7 +65,9 @@ defineOptions({
 })
 
 const props = defineProps(messageProps)
-defineEmits(messageEmits)
+const emit = defineEmits(messageEmits)
+
+const isStartTransition = ref(false)
 
 const { ns, zIndex } = useGlobalComponentSettings('message')
 const { currentZIndex, nextZIndex } = zIndex
@@ -109,6 +112,14 @@ function clearTimer() {
 
 function close() {
   visible.value = false
+
+  // if the message has never started a transition, we can destroy it immediately
+  nextTick(() => {
+    if (!isStartTransition.value) {
+      props.onClose?.()
+      emit('destroy')
+    }
+  })
 }
 
 function keydown({ code }: KeyboardEvent) {

packages/components/message/src/method.ts

@@ -135,7 +135,7 @@ const createMessage = (
     // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
     // for out component, so that all closing steps will not be skipped.
     close: () => {
-      vm.exposed!.visible.value = false
+      vm.exposed!.close()
     },
   }
 
@@ -188,7 +188,10 @@ messageTypes.forEach((type) => {
 })
 
 export function closeAll(type?: messageType): void {
-  for (const instance of instances) {
+  // Create a copy of instances to avoid modification during iteration
+  const instancesToClose = [...instances]
+
+  for (const instance of instancesToClose) {
     if (!type || type === instance.props.type) {
       instance.handler.close()
     }