From 1a789f1e5ba2987f433db7e8529fffcd554972ac Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 4 Feb 2026 14:54:08 +0800 Subject: [PATCH] refactor(cssinjs): simplify transition style generation (#56826) * chore: code optimization * update --- components/_util/wave/style.ts | 23 +++++++++------- components/alert/style/index.ts | 6 ++--- components/anchor/style/index.ts | 4 ++- components/card/style/index.ts | 5 +++- components/date-picker/style/index.ts | 4 ++- components/date-picker/style/util.ts | 4 ++- components/form/style/explain.ts | 10 +++---- components/menu/style/horizontal.ts | 7 +++-- components/menu/style/index.ts | 23 +++++++--------- components/menu/style/theme.ts | 14 +++++----- components/modal/style/index.ts | 7 ++--- components/notification/style/index.ts | 6 ++++- components/radio/style/index.ts | 8 +++--- components/segmented/style/index.ts | 6 +++-- components/select/style/index.ts | 6 +++-- components/spin/style/index.ts | 14 +++++----- components/style/index.tsx | 2 +- components/style/motion/collapse.ts | 37 ++++++++++++++------------ components/switch/style/index.ts | 9 +++++-- components/table/style/index.ts | 4 ++- components/tabs/style/index.ts | 8 +++--- components/tour/style/index.ts | 7 ++++- components/tree/style/index.ts | 9 ++++++- components/upload/style/list.ts | 12 +++++---- 24 files changed, 138 insertions(+), 97 deletions(-) diff --git a/components/_util/wave/style.ts b/components/_util/wave/style.ts index dfaa50e54f..2780ce24dd 100644 --- a/components/_util/wave/style.ts +++ b/components/_util/wave/style.ts @@ -8,7 +8,14 @@ export interface ComponentToken {} export interface WaveToken extends FullToken<'Wave'> {} const genWaveStyle: GenerateStyle = (token) => { - const { componentCls, colorPrimary, antCls } = token; + const { + componentCls, + colorPrimary, + motionDurationSlow, + motionEaseInOut, + motionEaseOutCirc, + antCls, + } = token; const [, varRef] = genCssVar(antCls, 'wave'); return { [componentCls]: { @@ -22,20 +29,18 @@ const genWaveStyle: GenerateStyle = (token) => { // =================== Motion =================== '&.wave-motion-appear': { - transition: [ - `box-shadow 0.4s ${token.motionEaseOutCirc}`, - `opacity 2s ${token.motionEaseOutCirc}`, - ].join(','), + transition: [`box-shadow 0.4s`, `opacity 2s`] + .map((prop) => `${prop} ${motionEaseOutCirc}`) + .join(','), '&-active': { boxShadow: `0 0 0 6px currentcolor`, opacity: 0, }, '&.wave-quick': { - transition: [ - `box-shadow ${token.motionDurationSlow} ${token.motionEaseInOut}`, - `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`, - ].join(','), + transition: [`box-shadow`, `opacity`] + .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`) + .join(','), }, }, }, diff --git a/components/alert/style/index.ts b/components/alert/style/index.ts index 920b4c80e4..89272659c3 100644 --- a/components/alert/style/index.ts +++ b/components/alert/style/index.ts @@ -98,9 +98,9 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`&${componentCls}-motion-leave`]: { overflow: 'hidden', opacity: 1, - transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc}, - padding-top ${duration} ${motionEaseInOutCirc}, padding-bottom ${duration} ${motionEaseInOutCirc}, - margin-bottom ${duration} ${motionEaseInOutCirc}`, + transition: [`max-height`, `opacity`, `padding-top`, `padding-bottom`, `margin-bottom`] + .map((prop) => `${prop} ${duration} ${motionEaseInOutCirc}`) + .join(', '), }, [`&${componentCls}-motion-leave-active`]: { diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index 646c796925..25e5ae0164 100644 --- a/components/anchor/style/index.ts +++ b/components/anchor/style/index.ts @@ -170,7 +170,9 @@ const genSharedAnchorHorizontalStyle: GenerateStyle = (token) => { [`${componentCls}-ink`]: { position: 'absolute', bottom: 0, - transition: `left ${motionDurationSlow} ease-in-out, width ${motionDurationSlow} ease-in-out`, + transition: [`left`, `width`] + .map((prop) => `${prop} ${motionDurationSlow} ease-in-out`) + .join(', '), height: lineWidthBold, backgroundColor: colorPrimary, }, diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 222c70cd32..2c7dff9894 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -315,6 +315,7 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { boxShadowTertiary, bodyPadding, extraColor, + motionDurationMid, } = token; return { @@ -379,7 +380,9 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-hoverable`]: { cursor: 'pointer', - transition: `box-shadow ${token.motionDurationMid}, border-color ${token.motionDurationMid}`, + transition: [`box-shadow`, `border-color`] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), '&:hover': { borderColor: 'transparent', diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 51ce8576f3..adf1fa5724 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -101,7 +101,9 @@ const genPickerStyle: GenerateStyle = (token) => { alignItems: 'center', lineHeight: 1, borderRadius, - transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`, + transition: [`border`, `box-shadow`, `background-color`] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), [`${componentCls}-prefix`]: { flex: '0 0 auto', diff --git a/components/date-picker/style/util.ts b/components/date-picker/style/util.ts index 0642d6dbd8..fb4a99b750 100644 --- a/components/date-picker/style/util.ts +++ b/components/date-picker/style/util.ts @@ -116,7 +116,9 @@ export const genOverflowStyle = ( marginBlock: INTERNAL_FIXED_ITEM_MARGIN, borderRadius: borderRadiusSM, cursor: 'default', - transition: `font-size ${motionDurationSlow}, line-height ${motionDurationSlow}, height ${motionDurationSlow}`, + transition: [`font-size`, `line-height`, `height`] + .map((prop) => `${prop} ${motionDurationSlow}`) + .join(', '), marginInlineEnd: token.calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(), paddingInlineStart: paddingXS, paddingInlineEnd: token.calc(paddingXS).div(2).equal(), diff --git a/components/form/style/explain.ts b/components/form/style/explain.ts index 695fe83609..76c225c2ec 100644 --- a/components/form/style/explain.ts +++ b/components/form/style/explain.ts @@ -2,7 +2,7 @@ import type { FormToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genFormValidateMotionStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, motionDurationFast, motionEaseInOut } = token; const helpCls = `${componentCls}-show-help`; const helpItemCls = `${componentCls}-show-help-item`; @@ -10,7 +10,7 @@ const genFormValidateMotionStyle: GenerateStyle = (token) => { return { [helpCls]: { // Explain holder - transition: `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`, + transition: `opacity ${motionDurationFast} ${motionEaseInOut}`, '&-appear, &-enter': { opacity: 0, @@ -31,9 +31,9 @@ const genFormValidateMotionStyle: GenerateStyle = (token) => { // Explain [helpItemCls]: { overflow: 'hidden', - transition: `height ${token.motionDurationFast} ${token.motionEaseInOut}, - opacity ${token.motionDurationFast} ${token.motionEaseInOut}, - transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`, + transition: `${['height', 'opacity', 'transform'] + .map((prop) => `${prop} ${motionDurationFast} ${motionEaseInOut}`) + .join(', ')} !important`, [`&${helpItemCls}-appear, &${helpItemCls}-enter`]: { transform: `translateY(-5px)`, diff --git a/components/menu/style/horizontal.ts b/components/menu/style/horizontal.ts index e7d44c37e9..6b6f8f94cc 100644 --- a/components/menu/style/horizontal.ts +++ b/components/menu/style/horizontal.ts @@ -43,10 +43,9 @@ const getHorizontalStyle: GenerateStyle = (token) => { }, [`${componentCls}-item, ${componentCls}-submenu-title`]: { - transition: [ - `border-color ${motionDurationSlow}`, - `background-color ${motionDurationSlow}`, - ].join(','), + transition: [`border-color`, `background-color`] + .map((prop) => `${prop} ${motionDurationSlow}`) + .join(','), }, // ===================== Sub Menu ===================== diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index 35da3e9ae2..757bc0e6bd 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -516,12 +516,9 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => { height: token.calc(menuArrowSize).mul(0.15).equal(), backgroundColor: 'currentcolor', borderRadius, - transition: [ - `background-color ${motionDurationSlow} ${motionEaseInOut}`, - `transform ${motionDurationSlow} ${motionEaseInOut}`, - `top ${motionDurationSlow} ${motionEaseInOut}`, - `color ${motionDurationSlow} ${motionEaseInOut}`, - ].join(','), + transition: [`background-color`, `transform`, `top`, `color`] + .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`) + .join(','), content: '""', }, @@ -619,10 +616,9 @@ const getBaseStyle: GenerateStyle = (token) => { }, [`&-horizontal ${componentCls}-submenu`]: { - transition: [ - `border-color ${motionDurationSlow} ${motionEaseInOut}`, - `background-color ${motionDurationSlow} ${motionEaseInOut}`, - ].join(','), + transition: [`border-color`, `background-color`] + .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`) + .join(','), }, [`${componentCls}-submenu, ${componentCls}-submenu-inline`]: { @@ -635,10 +631,9 @@ const getBaseStyle: GenerateStyle = (token) => { [`${componentCls}-submenu ${componentCls}-sub`]: { cursor: 'initial', - transition: [ - `background-color ${motionDurationSlow} ${motionEaseInOut}`, - `padding ${motionDurationSlow} ${motionEaseInOut}`, - ].join(','), + transition: [`background-color`, `padding`] + .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`) + .join(','), }, [`${componentCls}-title-content`]: { diff --git a/components/menu/style/theme.ts b/components/menu/style/theme.ts index 5054e127ae..0cf3f201d1 100644 --- a/components/menu/style/theme.ts +++ b/components/menu/style/theme.ts @@ -239,10 +239,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation borderInlineEnd: `${unit(activeBarWidth)} solid ${itemSelectedColor}`, transform: 'scaleY(0.0001)', opacity: 0, - transition: [ - `transform ${motionDurationMid} ${motionEaseOut}`, - `opacity ${motionDurationMid} ${motionEaseOut}`, - ].join(','), + transition: [`transform`, `opacity`] + .map((prop) => `${prop} ${motionDurationMid} ${motionEaseOut}`) + .join(','), content: '""', }, @@ -258,10 +257,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation '&::after': { transform: 'scaleY(1)', opacity: 1, - transition: [ - `transform ${motionDurationMid} ${motionEaseInOut}`, - `opacity ${motionDurationMid} ${motionEaseInOut}`, - ].join(','), + transition: [`transform`, `opacity`] + .map((prop) => `${prop} ${motionDurationMid} ${motionEaseInOut}`) + .join(','), }, }, }, diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts index 4392078a45..64dfa89395 100644 --- a/components/modal/style/index.ts +++ b/components/modal/style/index.ts @@ -184,7 +184,7 @@ export const genModalMaskStyle: GenerateStyle> = }; const genModalStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, motionDurationMid } = token; return [ // ======================== Root ========================= @@ -284,8 +284,9 @@ const genModalStyle: GenerateStyle = (token) => { border: 0, outline: 0, cursor: 'pointer', - transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`, - + transition: ['color', 'background-color'] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), '&-x': { display: 'flex', fontSize: token.fontSizeLG, diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index ab983b6f0d..40ff472540 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -136,6 +136,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { colorErrorBg, colorInfoBg, colorWarningBg, + motionDurationMid, } = token; const noticeCls = `${componentCls}-notice`; @@ -223,7 +224,10 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { width: token.notificationCloseButtonSize, height: token.notificationCloseButtonSize, borderRadius: token.borderRadiusSM, - transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`, + + transition: ['color', 'background-color'] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/components/radio/style/index.ts b/components/radio/style/index.ts index c7799e8c68..2bc8210f3e 100644 --- a/components/radio/style/index.ts +++ b/components/radio/style/index.ts @@ -388,11 +388,9 @@ const getRadioButtonStyle: GenerateStyle = (token) => { borderBlockStartWidth: calc(lineWidth).add(0.02).equal(), borderInlineEndWidth: lineWidth, cursor: 'pointer', - transition: [ - `color ${motionDurationMid}`, - `background-color ${motionDurationMid}`, - `box-shadow ${motionDurationMid}`, - ].join(','), + transition: [`color`, `background-color`, `box-shadow`] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(','), a: { color: buttonColor, diff --git a/components/segmented/style/index.ts b/components/segmented/style/index.ts index 9296dfb7ce..819facc82f 100644 --- a/components/segmented/style/index.ts +++ b/components/segmented/style/index.ts @@ -78,7 +78,7 @@ const segmentedTextEllipsisCss: CSSObject = { // ============================== Styles ============================== const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) => { - const { componentCls } = token; + const { componentCls, motionDurationSlow, motionEaseInOut } = token; const labelHeight = token .calc(token.controlHeight) @@ -262,8 +262,10 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) // transition effect when `appear-active` [`${componentCls}-thumb-motion-appear-active`]: { - transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOut}, width ${token.motionDurationSlow} ${token.motionEaseInOut}`, willChange: 'transform, width', + transition: [`transform`, `width`] + .map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`) + .join(', '), }, [`&${componentCls}-shape-round`]: { diff --git a/components/select/style/index.ts b/components/select/style/index.ts index 051069b86b..86fbe7faed 100644 --- a/components/select/style/index.ts +++ b/components/select/style/index.ts @@ -13,7 +13,7 @@ export type { ComponentToken }; // =============================== Base =============================== const genBaseStyle: GenerateStyle = (token) => { - const { antCls, componentCls, inputPaddingHorizontalBase } = token; + const { antCls, componentCls, motionDurationMid, inputPaddingHorizontalBase } = token; const hoverShowClearStyle: CSSObject = { [`${componentCls}-clear`]: { @@ -66,7 +66,9 @@ const genBaseStyle: GenerateStyle = (token) => { textTransform: 'none', cursor: 'pointer', opacity: 0, - transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`, + transition: ['color', 'opacity'] + .map((prop) => `${prop} ${motionDurationMid} ease`) + .join(', '), textRendering: 'auto', // https://github.com/ant-design/ant-design/issues/54205 // Force GPU compositing on Safari to prevent flickering on opacity/transform transitions diff --git a/components/spin/style/index.ts b/components/spin/style/index.ts index c29449a746..06863abe94 100644 --- a/components/spin/style/index.ts +++ b/components/spin/style/index.ts @@ -41,7 +41,7 @@ const antRotate = new Keyframes('antRotate', { }); const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => { - const { componentCls, calc } = token; + const { componentCls, motionDurationSlow, calc } = token; return { [componentCls]: { ...resetComponent(token), @@ -52,7 +52,7 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => textAlign: 'center', verticalAlign: 'middle', opacity: 0, - transition: `transform ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`, + transition: `transform ${motionDurationSlow} ${token.motionEaseInOutCirc}`, '&-spinning': { position: 'relative', @@ -148,7 +148,7 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => [`${componentCls}-container`]: { position: 'relative', - transition: `opacity ${token.motionDurationSlow}`, + transition: `opacity ${motionDurationSlow}`, '&::after': { position: 'absolute', @@ -161,7 +161,7 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => height: '100%', background: token.colorBgContainer, opacity: 0, - transition: `all ${token.motionDurationSlow}`, + transition: `all ${motionDurationSlow}`, content: '""', pointerEvents: 'none', }, @@ -193,7 +193,9 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => height: '1em', fontSize: token.dotSize, display: 'inline-block', - transition: `transform ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`, + transition: [`transform`, `opacity`] + .map((prop) => `${prop} ${motionDurationSlow} ease`) + .join(', '), transformOrigin: '50% 50%', lineHeight: 1, color: token.colorPrimary, @@ -272,7 +274,7 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => '&-circle': { strokeLinecap: 'round', transition: ['stroke-dashoffset', 'stroke-dasharray', 'stroke', 'stroke-width', 'opacity'] - .map((item) => `${item} ${token.motionDurationSlow} ease`) + .map((item) => `${item} ${motionDurationSlow} ease`) .join(','), fillOpacity: 0, stroke: 'currentcolor', diff --git a/components/style/index.tsx b/components/style/index.tsx index c282890b92..981248d10f 100644 --- a/components/style/index.tsx +++ b/components/style/index.tsx @@ -135,7 +135,7 @@ export const genCommonStyle = ( export const genFocusOutline = (token: AliasToken, offset?: number): CSSObject => ({ outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`, outlineOffset: offset ?? 1, - transition: 'outline-offset 0s, outline 0s', + transition: [`outline-offset`, `outline`].map((prop) => `${prop} 0s`).join(', '), }); export const genFocusStyle = (token: AliasToken, offset?: number): CSSObject => ({ diff --git a/components/style/motion/collapse.ts b/components/style/motion/collapse.ts index 37cf3c53ce..e07b7a76c7 100644 --- a/components/style/motion/collapse.ts +++ b/components/style/motion/collapse.ts @@ -1,23 +1,26 @@ import type { AliasToken, GenerateStyle, TokenWithCommonCls } from '../../theme/internal'; -const genCollapseMotion: GenerateStyle> = (token) => ({ - [token.componentCls]: { - // For common/openAnimation - [`${token.antCls}-motion-collapse-legacy`]: { - overflow: 'hidden', - - '&-active': { - transition: `height ${token.motionDurationMid} ${token.motionEaseInOut}, - opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`, +const genCollapseMotion: GenerateStyle> = (token) => { + const { componentCls, antCls, motionDurationMid, motionEaseInOut } = token; + return { + [componentCls]: { + // For common/openAnimation + [`${antCls}-motion-collapse-legacy`]: { + overflow: 'hidden', + '&-active': { + transition: `${['height', 'opacity'] + .map((prop) => `${prop} ${motionDurationMid} ${motionEaseInOut}`) + .join(', ')} !important`, + }, + }, + [`${antCls}-motion-collapse`]: { + overflow: 'hidden', + transition: `${['height', 'opacity'] + .map((prop) => `${prop} ${motionDurationMid} ${motionEaseInOut}`) + .join(', ')} !important`, }, }, - - [`${token.antCls}-motion-collapse`]: { - overflow: 'hidden', - transition: `height ${token.motionDurationMid} ${token.motionEaseInOut}, - opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`, - }, - }, -}); + }; +}; export default genCollapseMotion; diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts index f7745c8c95..7cf19db0a5 100644 --- a/components/switch/style/index.ts +++ b/components/switch/style/index.ts @@ -250,6 +250,7 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { innerMinMargin, innerMaxMargin, handleSize, + switchDuration, calc, } = token; const switchInnerCls = `${componentCls}-inner`; @@ -266,15 +267,19 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { height: '100%', paddingInlineStart: innerMaxMargin, paddingInlineEnd: innerMinMargin, - transition: `padding-inline-start ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`, + transition: [`padding-inline-start`, `padding-inline-end`] + .map((prop) => `${prop} ${switchDuration} ease-in-out`) + .join(', '), [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: { display: 'block', color: token.colorTextLightSolid, fontSize: token.fontSizeSM, - transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`, pointerEvents: 'none', minHeight: trackHeight, + transition: [`margin-inline-start`, `margin-inline-end`] + .map((prop) => `${prop} ${switchDuration} ease-in-out`) + .join(', '), }, [`${switchInnerCls}-checked`]: { diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 42e1dcaf44..5edb7b9339 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -345,8 +345,10 @@ const genTableStyle: GenerateStyle = (token) => { [`${componentCls}-tbody`]: { '> tr': { '> th, > td': { - transition: `background-color ${motionDurationMid}, border-color ${motionDurationMid}`, borderBottom: tableBorder, + transition: [`background-color`, `border-color`] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), // ========================= Nest Table =========================== [` diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index f68724570e..a1ac04c24c 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -369,6 +369,7 @@ const genPositionStyle: GenerateStyle = (token: TabsToken): CSSObject horizontalMargin, verticalItemPadding, verticalItemMargin, + motionDurationSlow, calc, } = token; return { @@ -397,8 +398,9 @@ const genPositionStyle: GenerateStyle = (token: TabsToken): CSSObject height: token.lineWidthBold, '&-animated': { - transition: `width ${token.motionDurationSlow}, left ${token.motionDurationSlow}, - right ${token.motionDurationSlow}`, + transition: ['width', 'left', 'right'] + .map((prop) => `${prop} ${motionDurationSlow}`) + .join(', '), }, }, @@ -524,7 +526,7 @@ const genPositionStyle: GenerateStyle = (token: TabsToken): CSSObject width: token.lineWidthBold, '&-animated': { - transition: `height ${token.motionDurationSlow}, top ${token.motionDurationSlow}`, + transition: ['height', 'top'].map((prop) => `${prop} ${motionDurationSlow}`).join(', '), }, }, diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts index e27b6c65cd..b48f807f9d 100644 --- a/components/tour/style/index.ts +++ b/components/tour/style/index.ts @@ -67,6 +67,7 @@ const genBaseStyle: GenerateStyle = (token) => { motionDurationSlow, antCls, primaryPrevBtnBg, + motionDurationMid, } = token; const [varName, varRef] = genCssVar(antCls, 'tooltip'); @@ -117,7 +118,11 @@ const genBaseStyle: GenerateStyle = (token) => { width: closeBtnSize, height: closeBtnSize, borderRadius: token.borderRadiusSM, - transition: `background-color ${token.motionDurationMid}, color ${token.motionDurationMid}`, + + transition: ['color', 'background-color'] + .map((prop) => `${prop} ${motionDurationMid}`) + .join(', '), + display: 'flex', alignItems: 'center', justifyContent: 'center', diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts index 6fffe3f5a3..11d0fb7623 100644 --- a/components/tree/style/index.ts +++ b/components/tree/style/index.ts @@ -116,6 +116,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => treeNodePadding, titleHeight, indentSize, + motionDurationMid, nodeSelectedBg, nodeHoverBg, colorTextQuaternary, @@ -352,7 +353,13 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => background: 'transparent', borderRadius: token.borderRadius, cursor: 'pointer', - transition: `all ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`, + transition: [ + `all ${motionDurationMid}`, + 'border 0s', + 'line-height 0s', + 'box-shadow 0s', + ].join(', '), + ...getDropIndicatorStyle(prefixCls, token), '&:hover': { diff --git a/components/upload/style/list.ts b/components/upload/style/list.ts index 1ce30077c6..cf82218013 100644 --- a/components/upload/style/list.ts +++ b/components/upload/style/list.ts @@ -5,7 +5,7 @@ import { clearFix, textEllipsis } from '../../style'; import type { GenerateStyle } from '../../theme/internal'; const genListStyle: GenerateStyle = (token) => { - const { componentCls, iconCls, fontSize, lineHeight, calc } = token; + const { componentCls, iconCls, fontSize, lineHeight, motionDurationSlow, calc } = token; const itemCls = `${componentCls}-list-item`; const actionsCls = `${itemCls}-actions`; const actionCls = `${itemCls}-action`; @@ -23,7 +23,7 @@ const genListStyle: GenerateStyle = (token) => { fontSize, display: 'flex', alignItems: 'center', - transition: `background-color ${token.motionDurationSlow}`, + transition: `background-color ${motionDurationSlow}`, borderRadius: token.borderRadiusSM, '&:hover': { @@ -35,7 +35,7 @@ const genListStyle: GenerateStyle = (token) => { padding: `0 ${unit(token.paddingXS)}`, lineHeight, flex: 'auto', - transition: `all ${token.motionDurationSlow}`, + transition: `all ${motionDurationSlow}`, }, [actionsCls]: { @@ -47,7 +47,7 @@ const genListStyle: GenerateStyle = (token) => { [iconCls]: { color: token.actionsColor, - transition: `all ${token.motionDurationSlow}`, + transition: `all ${motionDurationSlow}`, }, [` @@ -100,7 +100,9 @@ const genListStyle: GenerateStyle = (token) => { }, [`${componentCls}-list-item-container`]: { - transition: `opacity ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, + transition: ['opacity', 'height'] + .map((prop) => `${prop} ${motionDurationSlow}`) + .join(', '), // For smooth removing animation '&::before': {