From f035c9d57f7d981e43e18f7f5c7a33f693134e1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Thu, 10 Nov 2022 22:30:48 +0800
Subject: [PATCH] feat: add tour animated (#38469)

* feat: add animated

* feat: update doc

* feat: update doc

* feat: update doc

* feat: update dome

* feat: update lint

* feat: update style

* feat: update reviewer

* feat: update

* feat: update
---
 components/tour/index.tsx       |  1 +
 components/tour/style/index.tsx | 13 +++++++++++--
 package.json                    |  4 ++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/tour/index.tsx b/components/tour/index.tsx
index 84cf3cb7f2..e153f63545 100644
--- a/components/tour/index.tsx
+++ b/components/tour/index.tsx
@@ -44,6 +44,7 @@ const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
       prefixCls={prefixCls}
       steps={steps}
       current={current}
+      animated
       renderPanel={mergedRenderPanel}
     />,
   );
diff --git a/components/tour/style/index.tsx b/components/tour/style/index.tsx
index b784a0c664..3a6b7fd03c 100644
--- a/components/tour/style/index.tsx
+++ b/components/tour/style/index.tsx
@@ -39,6 +39,7 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
     colorWhite,
     colorBgTextHover,
     tourCloseSize,
+    motionDurationSlow,
   } = token;
 
   return [
@@ -199,7 +200,14 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
         },
       },
 
-      // Limit left and right placement radius
+      // ============================= mask ===========================
+      [`${componentCls}-mask`]: {
+        [`${componentCls}-placeholder-animated`]: {
+          transition: `all ${motionDurationSlow}`,
+        },
+      },
+
+      // =========== Limit left and right placement radius ==============
       [[
         `&-placement-left`,
         `&-placement-leftTop`,
@@ -216,7 +224,8 @@ const genBaseStyle: GenerateStyle<TourToken> = token => {
         },
       },
     },
-    // Arrow Style
+
+    // ============================= Arrow ===========================
     getArrowStyle<TourToken>(token, {
       colorBg: 'var(--antd-arrow-background-color)',
       showArrowCls: '',
diff --git a/package.json b/package.json
index cd8f9a5239..03f7b5a481 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "@ant-design/react-slick": "~0.29.1",
     "@babel/runtime": "^7.18.3",
     "@ctrl/tinycolor": "^3.4.0",
-    "@rc-component/tour": "~1.0.0",
+    "@rc-component/tour": "~1.0.1-2",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "dayjs": "^1.11.1",
@@ -318,7 +318,7 @@
   "bundlesize": [
     {
       "path": "./dist/antd.min.js",
-      "maxSize": "377 kB"
+      "maxSize": "377.5 kB"
     }
   ]
 }