feat: add zoom animation (#35148)

* feat: support Keyframes as 'animationName' value

* feat: add zoom animation

* chore: code clean

* test: fix anim

* chore: move file

* chore: dep clean

components/_util/theme/index.tsx

@@ -5,17 +5,6 @@ import defaultSeedToken, { derivative as defaultDerivative } from './themes/defa
 import version from '../../version';
 import { resetComponent, resetIcon, clearFix, roundedArrow } from './util';
 import formatToken from './util/alias';
-import {
-  initSlideMotion,
-  slideUpIn,
-  slideUpOut,
-  slideDownIn,
-  slideDownOut,
-  slideLeftIn,
-  slideLeftOut,
-  slideRightIn,
-  slideRightOut,
-} from './util/slide';
 import statisticToken, { merge as mergeToken } from './util/statistic';
 import { GlobalToken, PresetColors } from './interface';
 import type {
@@ -33,15 +22,6 @@ export {
   resetIcon,
   clearFix,
   roundedArrow,
-  initSlideMotion,
-  slideUpIn,
-  slideUpOut,
-  slideDownIn,
-  slideDownOut,
-  slideLeftIn,
-  slideLeftOut,
-  slideRightIn,
-  slideRightOut,
   useStyleRegister,
   // Statistic
   statisticToken,

components/date-picker/style/index.tsx

@@ -8,11 +8,8 @@ import {
   mergeToken,
   resetComponent,
   roundedArrow,
-  slideDownIn,
-  slideDownOut,
-  slideUpIn,
-  slideUpOut,
 } from '../../_util/theme';
+import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';
 import {
   genActiveStyle,
   genBasicInputStyle,

components/form/style/index.tsx

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

components/select/style/dropdown.tsx

@@ -1,13 +1,12 @@
 import { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent, GenerateStyle } from '../../_util/theme';
 import {
-  resetComponent,
   initSlideMotion,
   slideUpIn,
   slideUpOut,
   slideDownIn,
   slideDownOut,
-  GenerateStyle,
-} from '../../_util/theme';
+} from '../../style/motion';
 import type { SelectToken } from '.';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {

components/style/motion/index.ts

@@ -0,0 +1,26 @@
+import {
+  initSlideMotion,
+  slideUpIn,
+  slideUpOut,
+  slideDownIn,
+  slideDownOut,
+  slideLeftIn,
+  slideLeftOut,
+  slideRightIn,
+  slideRightOut,
+} from './slide';
+import { antZoomIn, antZoomOut } from './zoom';
+
+export {
+  initSlideMotion,
+  slideUpIn,
+  slideUpOut,
+  slideDownIn,
+  slideDownOut,
+  slideLeftIn,
+  slideLeftOut,
+  slideRightIn,
+  slideRightOut,
+  antZoomOut,
+  antZoomIn,
+};

components/style/motion/slide.tsx

@@ -1,5 +1,5 @@
 import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '..';
+import type { DerivativeToken } from '../../_util/theme';
 import { initMotion } from './motion';
 
 export const initSlideMotion = (

components/style/motion/zoom.tsx

@@ -0,0 +1,24 @@
+import { Keyframes } from '@ant-design/cssinjs';
+
+export const antZoomIn = new Keyframes('antZoomIn', {
+  '0%': {
+    transform: 'scale(0.2)',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 1,
+  },
+});
+
+export const antZoomOut = new Keyframes('antZoomOut', {
+  '0%': {
+    transform: 'scale(1)',
+  },
+
+  '100%': {
+    transform: 'scale(0.2)',
+    opacity: 0,
+  },
+});

package.json

@@ -115,7 +115,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/cssinjs": "^0.0.0-alpha.29",
+    "@ant-design/cssinjs": "^0.0.0-alpha.31",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",