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

@@ -44,6 +44,7 @@ const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
       prefixCls={prefixCls}
       steps={steps}
       current={current}
+      animated
       renderPanel={mergedRenderPanel}
     />,
   );

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: '',

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"
     }
   ]
 }