From fe6e2f29ba289206138fe17df046a55000b218ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sat, 28 Dec 2019 09:00:22 +0800
Subject: [PATCH] fix(Tag): incorrect transition when set closeable dynamically

---
 src/tag/index.less |  1 +
 src/tag/index.tsx  | 45 ++++++++++++++++++++++-----------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/tag/index.less b/src/tag/index.less
index f01fc6235..d745b518e 100644
--- a/src/tag/index.less
+++ b/src/tag/index.less
@@ -83,6 +83,7 @@
   }
 
   &__close {
+    min-width: 1em;
     margin-left: 2px;
   }
 }
diff --git a/src/tag/index.tsx b/src/tag/index.tsx
index 4ab2d814c..353595767 100644
--- a/src/tag/index.tsx
+++ b/src/tag/index.tsx
@@ -44,31 +44,30 @@ function Tag(
     classes[size] = size;
   }
 
-  const Content = (
-    <span
-      style={style}
-      class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
-      {...inherit(ctx, true)}
-    >
-      {slots.default?.()}
-      {props.closeable && (
-        <Icon
-          name="cross"
-          class={bem('close')}
-          onClick={(event: PointerEvent) => {
-            event.stopPropagation();
-            emit(ctx, 'close');
-          }}
-        />
-      )}
-    </span>
+  const CloseIcon = props.closeable && (
+    <Icon
+      name="cross"
+      class={bem('close')}
+      onClick={(event: PointerEvent) => {
+        event.stopPropagation();
+        emit(ctx, 'close');
+      }}
+    />
   );
 
-  if (props.closeable) {
-    return <transition name="van-fade">{Content}</transition>;
-  }
-
-  return Content;
+  return (
+    <transition name={props.closeable ? 'van-fade' : ''}>
+      <span
+        key="content"
+        style={style}
+        class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
+        {...inherit(ctx, true)}
+      >
+        {slots.default?.()}
+        {CloseIcon}
+      </span>
+    </transition>
+  );
 }
 
 Tag.props = {