refactor: motion (#36136)

* fix: modal motion

* fix: image motion

* refactor: popover & tooltip motion

* chore: code clean

* refactor: move motion

* refactor

* chore: code clean

* refactor: dropdown support move motion

components/_util/theme/interface.ts

@@ -169,6 +169,7 @@ export interface SeedToken extends PresetColorType {
   // Motion
   motionUnit: number;
   motionBase: number;
+  motionEaseOutCirc: string;
   motionEaseInOutCirc: string;
   motionEaseInOut: string;
   motionEaseOutBack: string;

components/_util/theme/themes/default.ts

@@ -183,6 +183,7 @@ const seedToken: SeedToken = {
   // Motion
   motionUnit: 0.1,
   motionBase: 0,
+  motionEaseOutCirc: `cubic-bezier(0.08, 0.82, 0.17, 1)`,
   motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`,
   motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,

components/dropdown/style/index.tsx

@@ -1,13 +1,14 @@
 // deps-lint-skip-all
-import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken, roundedArrow } from '../../_util/theme';
 import {
+  initMoveMotion,
   initSlideMotion,
-  slideUpIn,
-  slideUpOut,
   slideDownIn,
   slideDownOut,
+  slideUpIn,
+  slideUpOut,
 } from '../../style/motion';
+import type { FullToken, GenerateStyle } from '../../_util/theme';
+import { genComponentStyleHook, mergeToken, resetComponent, roundedArrow } from '../../_util/theme';
 import genButtonStyle from './button';
 import genStatusStyle from './status';
 
@@ -27,7 +28,6 @@ export interface DropdownToken extends FullToken<'Dropdown'> {
 // =============================== Base ===============================
 const genBaseStyle: GenerateStyle<DropdownToken> = token => {
   const {
-    rootPrefixCls,
     componentCls,
     menuCls,
     zIndexPopup,
@@ -406,8 +406,10 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
 
     // Follow code may reuse in other components
     [
-      initSlideMotion(rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
-      initSlideMotion(rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
+      initSlideMotion(token, 'slide-up'),
+      initSlideMotion(token, 'slide-down'),
+      initMoveMotion(token, 'move-up'),
+      initMoveMotion(token, 'move-down'),
     ],
   ];
 };

components/form/style/index.tsx

@@ -1,6 +1,6 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
-import { antZoomIn } from '../../style/motion/zoom';
+import { zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
@@ -295,7 +295,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = token => {
         fontSize: token.fontSize,
         textAlign: 'center',
         visibility: 'visible',
-        animationName: antZoomIn,
+        animationName: zoomIn,
         animationDuration: token.motionDurationMid,
         animationTimingFunction: token.motionEaseOutBack,
         pointerEvents: 'none',
@@ -536,6 +536,6 @@ export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
     genHorizontalStyle(formToken),
     genInlineStyle(formToken),
     genVerticalStyle(formToken),
-    antZoomIn,
+    zoomIn,
   ];
 });

components/image/style/index.tsx

@@ -1,7 +1,8 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { modalMask } from '../../modal/style';
+import { genModalMaskStyle } from '../../modal/style';
+import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../_util/theme';
 import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
@@ -134,8 +135,6 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
   return [
     {
       [`${componentCls}-preview-root`]: {
-        ...modalMask(previewCls, token),
-
         [previewCls]: {
           height: '100%',
           textAlign: 'center',
@@ -242,6 +241,14 @@ const genImageStyle: GenerateStyle<ImageToken> = (token: ImageToken) => {
   };
 };
 
+const genPreviewMotion: GenerateStyle<ImageToken> = token => {
+  const { previewCls } = token;
+
+  return {
+    [`${previewCls}-root`]: initZoomMotion(token, 'zoom'),
+  };
+};
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Image',
@@ -259,7 +266,12 @@ export default genComponentStyleHook(
       imagePreviewSwitchSize: token.controlHeightLG,
     });
 
-    return [genImageStyle(imageToken), genImagePreviewStyle(imageToken)];
+    return [
+      genImageStyle(imageToken),
+      genImagePreviewStyle(imageToken),
+      genModalMaskStyle(imageToken),
+      genPreviewMotion(imageToken),
+    ];
   },
   token => ({
     zIndexPopup: token.zIndexPopupBase + 80,

components/modal/style/index.tsx

@@ -1,7 +1,7 @@
 // deps-lint-skip-all
-import type { CSSObject } from '@ant-design/cssinjs';
 import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
 import type React from 'react';
+import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../_util/theme';
 import { clearFix, genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
 
@@ -45,36 +45,43 @@ function box(position: React.CSSProperties['position']): React.CSSProperties {
   };
 }
 
-export function modalMask(componentCls: string, token: TokenWithCommonCls<AliasToken>): CSSObject {
-  return {
-    [`${componentCls}${token.antCls}-zoom-enter, ${componentCls}${token.antCls}-zoom-appear`]: {
-      // reset scale avoid mousePosition bug
-      transform: 'none',
-      opacity: 0,
-      animationDuration: token.motionDurationSlow,
-      // https://github.com/ant-design/ant-design/issues/11777
-      userSelect: 'none',
-    },
+export const genModalMaskStyle: GenerateStyle<TokenWithCommonCls<AliasToken>> = token => {
+  const { componentCls } = token;
 
-    [`${componentCls}-mask`]: {
-      ...box('fixed'),
-      zIndex: token.zIndexPopupBase,
-      height: '100%',
-      backgroundColor: token.controlMaskBg,
+  return [
+    {
+      [`${componentCls}-root`]: {
+        [`${componentCls}${token.antCls}-zoom-enter, ${componentCls}${token.antCls}-zoom-appear`]: {
+          // reset scale avoid mousePosition bug
+          transform: 'none',
+          opacity: 0,
+          animationDuration: token.motionDurationSlow,
+          // https://github.com/ant-design/ant-design/issues/11777
+          userSelect: 'none',
+        },
 
-      [`${componentCls}-hidden`]: {
-        display: 'none',
+        [`${componentCls}-mask`]: {
+          ...box('fixed'),
+          zIndex: token.zIndexPopupBase,
+          height: '100%',
+          backgroundColor: token.controlMaskBg,
+
+          [`${componentCls}-hidden`]: {
+            display: 'none',
+          },
+        },
+
+        [`${componentCls}-wrap`]: {
+          ...box('fixed'),
+          overflow: 'auto',
+          outline: 0,
+          WebkitOverflowScrolling: 'touch',
+        },
       },
     },
-
-    [`${componentCls}-wrap`]: {
-      ...box('fixed'),
-      overflow: 'auto',
-      outline: 0,
-      WebkitOverflowScrolling: 'touch',
-    },
-  };
-}
+    { [`${componentCls}-root`]: initFadeMotion(token) },
+  ];
+};
 
 const genModalStyle: GenerateStyle<ModalToken> = token => {
   const { componentCls } = token;
@@ -83,8 +90,6 @@ const genModalStyle: GenerateStyle<ModalToken> = token => {
     // ======================== Root =========================
     {
       [`${componentCls}-root`]: {
-        ...modalMask(componentCls, token),
-
         [`${componentCls}-wrap`]: {
           zIndex: token.zIndexPopupBase,
           position: 'fixed',
@@ -368,5 +373,11 @@ export default genComponentStyleHook('Modal', token => {
     modalIconHoverColor: token.colorActionHover,
     modalConfirmIconSize: token.fontSize * token.lineHeight,
   });
-  return [genModalStyle(modalToken), genModalConfirmStyle(modalToken), genRTLStyle(modalToken)];
+  return [
+    genModalStyle(modalToken),
+    genModalConfirmStyle(modalToken),
+    genRTLStyle(modalToken),
+    genModalMaskStyle(modalToken),
+    initZoomMotion(modalToken, 'zoom'),
+  ];
 });

components/popover/style/index.tsx

@@ -1,4 +1,5 @@
 // deps-lint-skip-all
+import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, PresetColorType } from '../../_util/theme';
 import {
   genComponentStyleHook,
@@ -134,7 +135,11 @@ export default genComponentStyleHook(
       popoverPaddingHorizontal: token.padding,
     });
 
-    return [genBaseStyle(popoverToken), genColorStyle(popoverToken)];
+    return [
+      genBaseStyle(popoverToken),
+      genColorStyle(popoverToken),
+      initZoomMotion(popoverToken, 'zoom-big'),
+    ];
   },
   ({ zIndexPopupBase }) => ({
     zIndexPopup: zIndexPopupBase + 30,

components/select/style/dropdown.tsx

@@ -1,6 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
 import {
+  initMoveMotion,
   initSlideMotion,
   slideDownIn,
   slideDownOut,
@@ -28,7 +29,7 @@ const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
 };
 
 const genSingleStyle: GenerateStyle<SelectToken> = token => {
-  const { rootPrefixCls, antCls, componentCls } = token;
+  const { antCls, componentCls } = token;
 
   const selectItemCls = `${componentCls}-item`;
 
@@ -153,8 +154,10 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
     },
 
     // Follow code may reuse in other components
-    initSlideMotion(rootPrefixCls, 'slide-up', slideUpIn, slideUpOut, token),
-    initSlideMotion(rootPrefixCls, 'slide-down', slideDownIn, slideDownOut, token),
+    initSlideMotion(token, 'slide-up'),
+    initSlideMotion(token, 'slide-down'),
+    initMoveMotion(token, 'move-up'),
+    initMoveMotion(token, 'move-down'),
   ];
 };
 

components/style/core/index.less

@@ -2,4 +2,4 @@
 @import 'base';
 @import 'global';
 @import 'iconfont';
-@import 'motion';
+//@import 'motion';

components/style/motion/fade.tsx

@@ -0,0 +1,45 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
+import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
+import type { AliasToken } from '../../_util/theme';
+import { initMotion } from './motion';
+
+export const fadeIn = new Keyframes('antFadeIn', {
+  '0%': {
+    opacity: 0,
+  },
+  '100%': {
+    opacity: 1,
+  },
+});
+
+export const fadeOut = new Keyframes('antFadeOut', {
+  '0%': {
+    opacity: 1,
+  },
+  '100%': {
+    opacity: 0,
+  },
+});
+
+export const initFadeMotion = (token: TokenWithCommonCls<AliasToken>): CSSInterpolation => {
+  const { antCls } = token;
+  const motionCls = `${antCls}-fade`;
+
+  return [
+    initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid),
+    {
+      [`
+        ${motionCls}-enter,
+        ${motionCls}-appear
+      `]: {
+        opacity: 0,
+        animationTimingFunction: 'linear',
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: 'linear',
+      },
+    },
+  ];
+};

components/style/motion/index.ts

@@ -1,15 +1,41 @@
+import { fadeIn, fadeOut, initFadeMotion } from './fade';
+import {
+  initMoveMotion,
+  moveDownIn,
+  moveDownOut,
+  moveLeftIn,
+  moveLeftOut,
+  moveRightIn,
+  moveRightOut,
+  moveUpIn,
+  moveUpOut,
+} from './move';
 import {
   initSlideMotion,
-  slideUpIn,
-  slideUpOut,
   slideDownIn,
   slideDownOut,
   slideLeftIn,
   slideLeftOut,
   slideRightIn,
   slideRightOut,
+  slideUpIn,
+  slideUpOut,
 } from './slide';
-import { antZoomIn, antZoomOut } from './zoom';
+import {
+  initZoomMotion,
+  zoomBigIn,
+  zoomBigOut,
+  zoomDownIn,
+  zoomDownOut,
+  zoomIn,
+  zoomLeftIn,
+  zoomLeftOut,
+  zoomOut,
+  zoomRightIn,
+  zoomRightOut,
+  zoomUpIn,
+  zoomUpOut,
+} from './zoom';
 
 export {
   initSlideMotion,
@@ -21,6 +47,29 @@ export {
   slideLeftOut,
   slideRightIn,
   slideRightOut,
-  antZoomOut,
-  antZoomIn,
+  zoomOut,
+  zoomIn,
+  zoomBigIn,
+  zoomLeftOut,
+  zoomBigOut,
+  zoomLeftIn,
+  zoomRightIn,
+  zoomUpIn,
+  zoomRightOut,
+  zoomUpOut,
+  zoomDownIn,
+  zoomDownOut,
+  initZoomMotion,
+  fadeIn,
+  fadeOut,
+  initFadeMotion,
+  moveRightOut,
+  moveRightIn,
+  moveLeftOut,
+  moveLeftIn,
+  moveDownOut,
+  moveDownIn,
+  moveUpIn,
+  moveUpOut,
+  initMoveMotion,
 };

components/style/motion/motion.tsx

@@ -13,39 +13,35 @@ const initMotionCommonLeave = (duration: string): CSSObject => ({
 });
 
 export const initMotion = (
-  motionName: string,
+  motionCls: string,
   inKeyframes: Keyframes,
   outKeyframes: Keyframes,
   duration: string,
-): CSSObject => {
-  const motionCls = `.${motionName}`;
+): CSSObject => ({
+  [`
+    ${motionCls}-enter,
+    ${motionCls}-appear
+  `]: {
+    ...initMotionCommon(duration),
+    animationPlayState: 'paused',
+  },
 
-  return {
-    [`
-      ${motionCls}-enter,
-      ${motionCls}-appear
-    `]: {
-      ...initMotionCommon(duration),
-      animationPlayState: 'paused',
-    },
+  [`${motionCls}-leave`]: {
+    ...initMotionCommonLeave(duration),
+    animationPlayState: 'paused',
+  },
 
-    [`${motionCls}-leave`]: {
-      ...initMotionCommonLeave(duration),
-      animationPlayState: 'paused',
-    },
+  [`
+    ${motionCls}-enter${motionCls}-enter-active,
+    ${motionCls}-appear${motionCls}-appear-active
+  `]: {
+    animationName: inKeyframes,
+    animationPlayState: 'running',
+  },
 
-    [`
-      ${motionCls}-enter${motionCls}-enter-active,
-      ${motionCls}-appear${motionCls}-appear-active
-    `]: {
-      animationName: inKeyframes,
-      animationPlayState: 'running',
-    },
-
-    [`${motionCls}-leave${motionCls}-leave-active`]: {
-      animationName: outKeyframes,
-      animationPlayState: 'running',
-      pointerEvents: 'none',
-    },
-  };
-};
+  [`${motionCls}-leave${motionCls}-leave-active`]: {
+    animationName: outKeyframes,
+    animationPlayState: 'running',
+    pointerEvents: 'none',
+  },
+});

components/style/motion/move.tsx

@@ -0,0 +1,163 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { Keyframes } from '@ant-design/cssinjs';
+import type { AliasToken } from '../../_util/theme';
+import type { TokenWithCommonCls } from '../../_util/theme/util/genComponentStyleHook';
+import { initMotion } from './motion';
+
+export const moveDownIn = new Keyframes('antMoveDownIn', {
+  '0%': {
+    transform: 'translateY(100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'translateY(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+});
+
+export const moveDownOut = new Keyframes('antMoveDownOut', {
+  '0%': {
+    transform: 'translateY(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+
+  '100%': {
+    transform: 'translateY(100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+});
+
+export const moveLeftIn = new Keyframes('antMoveLeftIn', {
+  '0%': {
+    transform: 'translateX(-100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'translateX(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+});
+
+export const moveLeftOut = new Keyframes('antMoveLeftOut', {
+  '0%': {
+    transform: 'translateX(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+
+  '100%': {
+    transform: 'translateX(-100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+});
+
+export const moveRightIn = new Keyframes('antMoveRightIn', {
+  '0%': {
+    transform: 'translateX(100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'translateX(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+});
+
+export const moveRightOut = new Keyframes('antMoveRightOut', {
+  '0%': {
+    transform: 'translateX(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+
+  '100%': {
+    transform: 'translateX(100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+});
+
+export const moveUpIn = new Keyframes('antMoveUpIn', {
+  '0%': {
+    transform: 'translateY(-100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'translateY(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+});
+
+export const moveUpOut = new Keyframes('antMoveUpOut', {
+  '0%': {
+    transform: 'translateY(0%)',
+    transformOrigin: '0 0',
+    opacity: 1,
+  },
+
+  '100%': {
+    transform: 'translateY(-100%)',
+    transformOrigin: '0 0',
+    opacity: 0,
+  },
+});
+
+type MoveMotionTypes = 'move-up' | 'move-down' | 'move-left' | 'move-right';
+const moveMotion: Record<MoveMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  'move-up': {
+    inKeyframes: moveUpIn,
+    outKeyframes: moveUpOut,
+  },
+  'move-down': {
+    inKeyframes: moveDownIn,
+    outKeyframes: moveDownOut,
+  },
+  'move-left': {
+    inKeyframes: moveLeftIn,
+    outKeyframes: moveLeftOut,
+  },
+  'move-right': {
+    inKeyframes: moveRightIn,
+    outKeyframes: moveRightOut,
+  },
+};
+
+export const initMoveMotion = (
+  token: TokenWithCommonCls<AliasToken>,
+  motionName: MoveMotionTypes,
+): CSSInterpolation => {
+  const { antCls } = token;
+  const motionCls = `${antCls}-${motionName}`;
+  const { inKeyframes, outKeyframes } = moveMotion[motionName];
+
+  return [
+    initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid),
+    {
+      [`
+        ${motionCls}-enter,
+        ${motionCls}-appear
+      `]: {
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutCirc,
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInOutCirc,
+      },
+    },
+  ];
+};

components/style/motion/slide.tsx

@@ -1,37 +1,9 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../../_util/theme';
+import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
+import type { AliasToken } from '../../_util/theme';
 import { initMotion } from './motion';
 
-export const initSlideMotion = (
-  rootPrefixCls: string,
-  motionName: string,
-  inKeyframes: Keyframes,
-  outKeyframes: Keyframes,
-  token: DerivativeToken,
-): CSSInterpolation => {
-  const rootMotionName = `${rootPrefixCls}-${motionName}`;
-  const motionCls = `.${rootMotionName}`;
-
-  return [
-    initMotion(rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid),
-
-    {
-      [`
-      ${motionCls}-enter,
-      ${motionCls}-appear
-    `]: {
-        opacity: 0,
-        animationTimingFunction: token.motionEaseOutQuint,
-      },
-
-      [`${motionCls}-leave`]: {
-        animationTimingFunction: token.motionEaseInQuint,
-      },
-    },
-  ];
-};
-
 export const slideUpIn = new Keyframes('antSlideUpIn', {
   '0%': {
     transform: 'scaleY(0.8)',
@@ -143,3 +115,50 @@ export const slideRightOut = new Keyframes('antSlideRightOut', {
     opacity: 0,
   },
 });
+
+type SlideMotionTypes = 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+const slideMotion: Record<SlideMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  'slide-up': {
+    inKeyframes: slideUpIn,
+    outKeyframes: slideUpOut,
+  },
+  'slide-down': {
+    inKeyframes: slideDownIn,
+    outKeyframes: slideDownOut,
+  },
+  'slide-left': {
+    inKeyframes: slideLeftIn,
+    outKeyframes: slideLeftOut,
+  },
+  'slide-right': {
+    inKeyframes: slideRightIn,
+    outKeyframes: slideRightOut,
+  },
+};
+
+export const initSlideMotion = (
+  token: TokenWithCommonCls<AliasToken>,
+  motionName: SlideMotionTypes,
+): CSSInterpolation => {
+  const { antCls } = token;
+  const motionCls = `${antCls}-${motionName}`;
+  const { inKeyframes, outKeyframes } = slideMotion[motionName];
+
+  return [
+    initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid),
+
+    {
+      [`
+      ${motionCls}-enter,
+      ${motionCls}-appear
+    `]: {
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutQuint,
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInQuint,
+      },
+    },
+  ];
+};

components/style/motion/zoom.tsx

@@ -1,6 +1,10 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
+import type { TokenWithCommonCls } from 'antd/es/_util/theme/util/genComponentStyleHook';
+import type { AliasToken } from '../../_util/theme';
+import { initMotion } from './motion';
 
-export const antZoomIn = new Keyframes('antZoomIn', {
+export const zoomIn = new Keyframes('antZoomIn', {
   '0%': {
     transform: 'scale(0.2)',
     opacity: 0,
@@ -12,7 +16,7 @@ export const antZoomIn = new Keyframes('antZoomIn', {
   },
 });
 
-export const antZoomOut = new Keyframes('antZoomOut', {
+export const zoomOut = new Keyframes('antZoomOut', {
   '0%': {
     transform: 'scale(1)',
   },
@@ -22,3 +26,205 @@ export const antZoomOut = new Keyframes('antZoomOut', {
     opacity: 0,
   },
 });
+
+export const zoomBigIn = new Keyframes('antZoomBigIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 1,
+  },
+});
+
+export const zoomBigOut = new Keyframes('antZoomBigOut', {
+  '0%': {
+    transform: 'scale(1)',
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    opacity: 0,
+  },
+});
+
+export const zoomUpIn = new Keyframes('antZoomUpIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 0%',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 0%',
+  },
+});
+
+export const zoomUpOut = new Keyframes('antZoomUpOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 0%',
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 0%',
+    opacity: 0,
+  },
+});
+
+export const zoomLeftIn = new Keyframes('antZoomLeftIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '0% 50%',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '0% 50%',
+  },
+});
+
+export const zoomLeftOut = new Keyframes('antZoomLeftOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '0% 50%',
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '0% 50%',
+    opacity: 0,
+  },
+});
+
+export const zoomRightIn = new Keyframes('antZoomRightIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '100% 50%',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '100% 50%',
+  },
+});
+
+export const zoomRightOut = new Keyframes('antZoomRightOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '100% 50%',
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '100% 50%',
+    opacity: 0,
+  },
+});
+
+export const zoomDownIn = new Keyframes('antZoomDownIn', {
+  '0%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 100%',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 100%',
+  },
+});
+
+export const zoomDownOut = new Keyframes('antZoomDownOut', {
+  '0%': {
+    transform: 'scale(1)',
+    transformOrigin: '50% 100%',
+  },
+
+  '100%': {
+    transform: 'scale(0.8)',
+    transformOrigin: '50% 100%',
+    opacity: 0,
+  },
+});
+
+type ZoomMotionTypes =
+  | 'zoom'
+  | 'zoom-big'
+  | 'zoom-big-fast'
+  | 'zoom-left'
+  | 'zoom-right'
+  | 'zoom-up'
+  | 'zoom-down';
+const zoomMotion: Record<ZoomMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
+  zoom: {
+    inKeyframes: zoomIn,
+    outKeyframes: zoomOut,
+  },
+  'zoom-big': {
+    inKeyframes: zoomBigIn,
+    outKeyframes: zoomBigOut,
+  },
+  'zoom-big-fast': {
+    inKeyframes: zoomBigIn,
+    outKeyframes: zoomBigOut,
+  },
+  'zoom-left': {
+    inKeyframes: zoomLeftIn,
+    outKeyframes: zoomLeftOut,
+  },
+  'zoom-right': {
+    inKeyframes: zoomRightIn,
+    outKeyframes: zoomRightOut,
+  },
+  'zoom-up': {
+    inKeyframes: zoomUpIn,
+    outKeyframes: zoomUpOut,
+  },
+  'zoom-down': {
+    inKeyframes: zoomDownIn,
+    outKeyframes: zoomDownOut,
+  },
+};
+
+export const initZoomMotion = (
+  token: TokenWithCommonCls<AliasToken>,
+  motionName: ZoomMotionTypes,
+): CSSInterpolation => {
+  const { antCls } = token;
+  const motionCls = `${antCls}-${motionName}`;
+  const { inKeyframes, outKeyframes } = zoomMotion[motionName];
+
+  return [
+    initMotion(
+      motionCls,
+      inKeyframes,
+      outKeyframes,
+      motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid,
+    ),
+    {
+      [`
+        ${motionCls}-enter,
+        ${motionCls}-appear
+      `]: {
+        transform: 'scale(0)',
+        opacity: 0,
+        animationTimingFunction: token.motionEaseOutCirc,
+
+        '&-prepare': {
+          transform: 'none',
+        },
+      },
+
+      [`${motionCls}-leave`]: {
+        animationTimingFunction: token.motionEaseInOutCirc,
+      },
+    },
+  ];
+};

components/tooltip/style/index.tsx

@@ -1,6 +1,7 @@
 // deps-lint-skip-all
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import { initZoomMotion } from '../../style/motion';
 import type {
   FullToken,
   GenerateStyle,
@@ -130,7 +131,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
         tooltipBg: colorBgDefault,
       });
 
-      return [genTooltipStyle(TooltipToken)];
+      return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')];
     },
     ({ zIndexPopupBase }) => ({
       zIndexPopup: zIndexPopupBase + 70,