From be23e0ccb6da48728dd5e7630bec2fcabc33e1c0 Mon Sep 17 00:00:00 2001
From: dopamine <coderzyou@gmail.com>
Date: Wed, 28 Aug 2024 22:18:23 +0800
Subject: [PATCH] fix(components): [tag] leave animations not working (#18006)

* fix(components): [tag] leave animations not working

* use @vue:mounted to ensure forward compatibility with Vue

Co-authored-by: btea <2356281422@qq.com>

---------

Co-authored-by: btea <2356281422@qq.com>
---
 packages/components/tag/src/tag.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/components/tag/src/tag.vue b/packages/components/tag/src/tag.vue
index 81d80d0cee..89be267299 100644
--- a/packages/components/tag/src/tag.vue
+++ b/packages/components/tag/src/tag.vue
@@ -12,7 +12,12 @@
       <Close />
     </el-icon>
   </span>
-  <transition v-else :name="`${ns.namespace.value}-zoom-in-center`" appear>
+  <transition
+    v-else
+    :name="`${ns.namespace.value}-zoom-in-center`"
+    appear
+    @vue:mounted="handleVNodeMounted"
+  >
     <span
       :class="containerKls"
       :style="{ backgroundColor: color }"
@@ -36,6 +41,7 @@ import { useNamespace } from '@element-plus/hooks'
 import { useFormSize } from '@element-plus/components/form'
 
 import { tagEmits, tagProps } from './tag'
+import type { VNode } from 'vue'
 
 defineOptions({
   name: 'ElTag',
@@ -66,4 +72,9 @@ const handleClose = (event: MouseEvent) => {
 const handleClick = (event: MouseEvent) => {
   emit('click', event)
 }
+
+const handleVNodeMounted = (vnode: VNode) => {
+  // @ts-ignore
+  vnode.component.subTree.component.bum = null
+}
 </script>