test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

feat: v5 motion duration adjustment (#37438)

Browse Source
This commit is contained in:
MadCcc 2022-09-07 14:08:14 +08:00 committed by GitHub
parent 229d0d81b7
commit 2cf245969b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/alert/style/index.tsx
View File

@ -177,7 +177,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
const {
componentCls,
iconCls,
motionDurationSlow: duration,
motionDurationFast,
marginXS,
fontSizeIcon,
colorIcon,
@ -203,7 +203,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
[`${iconCls}-close`]: {
color: colorIcon,
transition: `color ${duration}`,
transition: `color ${motionDurationFast}`,
'&:hover': {
color: colorIconHover,
},
@ -212,7 +212,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
'&-close-text': {
color: colorIcon,
transition: `color ${duration}`,
transition: `color ${motionDurationFast}`,
'&:hover': {
color: colorIconHover,
},

4
components/back-top/style/index.tsx
View File

@ -50,11 +50,11 @@ const genSharedBackTopStyle: GenerateStyle<BackTopToken, CSSObject> = (token): C
textAlign: 'center',
backgroundColor: token.backTopBackground,
borderRadius: backTopSize,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
'&:hover': {
backgroundColor: token.backTopHoverBackground,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
},
},

2
components/badge/style/index.tsx
View File

@ -116,7 +116,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
background: token.badgeColor,
borderRadius: token.badgeHeight / 2,
boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`,
transition: `background ${token.motionDurationSlow}`,
transition: `background ${token.motionDurationFast}`,
a: {
color: token.badgeTextColor,

2
components/breadcrumb/style/index.tsx
View File

@ -37,7 +37,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
a: {
color: token.breadcrumbLinkColor,
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}`,
padding: `0 ${token.paddingXXS}px`,
borderRadius: token.radiusSM,
height: token.lineHeight * token.fontSize,

2
components/button/style/index.tsx
View File

@ -27,7 +27,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
backgroundColor: 'transparent',
border: `${token.controlLineWidth}px ${token.controlLineType} transparent`,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
userSelect: 'none',
touchAction: 'manipulation',
lineHeight: token.lineHeight,

8
components/card/style/index.tsx
View File

@ -93,7 +93,7 @@ const genCardGridStyle: GenerateStyle<CardToken> = (token): CSSObject => {
${lineWidth}px 0 0 0 ${colorBorderSecondary} inset,
0 ${lineWidth}px 0 0 ${colorBorderSecondary} inset;
`,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
'&-hoverable:hover': {
position: 'relative',
@ -131,7 +131,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
'&:hover': {
color: token.colorPrimary,
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}`,
},
[`a:not(${componentCls}-btn), > ${iconCls}`]: {
@ -139,7 +139,7 @@ const genCardActionsStyle: GenerateStyle<CardToken> = (token): CSSObject => {
width: '100%',
color: token.colorTextDescription,
lineHeight: `${token.fontSize * token.lineHeight}px`,
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}`,
'&:hover': {
color: token.colorPrimary,
@ -299,7 +299,7 @@ const genCardStyle: GenerateStyle<CardToken> = (token): CSSObject => {
[`${componentCls}-hoverable`]: {
cursor: 'pointer',
transition: `box-shadow ${token.motionDurationSlow}, border-color ${token.motionDurationSlow}`,
transition: `box-shadow ${token.motionDurationFast}, border-color ${token.motionDurationFast}`,
'&:hover': {
borderColor: 'transparent',

2
components/cascader/style/index.tsx
View File

@ -92,7 +92,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
'&:hover': {
background: token.controlItemBgHover,

2
components/checkbox/style/index.tsx
View File

@ -102,7 +102,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadiusSM,
borderCollapse: 'separate',
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
'&:after': {
position: 'absolute',

14
components/date-picker/style/index.tsx
View File

@ -81,7 +81,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
height: token.pickerPanelCellHeight,
lineHeight: `${token.pickerPanelCellHeight}px`,
borderRadius: token.controlRadiusSM,
transition: `background ${token.motionDurationSlow}, border ${token.motionDurationSlow}`,
transition: `background ${token.motionDurationFast}, border ${token.motionDurationFast}`,
},
// >>> Hover
@ -320,7 +320,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
background: 'transparent',
border: 0,
cursor: 'pointer',
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}`,
},
'> button': {
@ -613,7 +613,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
'&-row': {
td: {
transition: `background ${token.motionDurationSlow}`,
transition: `background ${token.motionDurationFast}`,
},
'&:hover td': {
@ -700,7 +700,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
overflowY: 'hidden',
textAlign: 'start',
listStyle: 'none',
transition: `background ${token.motionDurationSlow}`,
transition: `background ${token.motionDurationFast}`,
'&::after': {
display: 'block',
@ -744,7 +744,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
lineHeight: `${token.pickerTimePanelCellHeight}px`,
borderRadius: 0,
cursor: 'pointer',
transition: `background ${token.motionDurationSlow}`,
transition: `background ${token.motionDurationFast}`,
'&:hover': {
background: token.controlItemBgHover,
@ -835,7 +835,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
background: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.controlRadius,
transition: `border ${token.motionDurationSlow}, box-shadow ${token.motionDurationSlow}`,
transition: `border ${token.motionDurationFast}, box-shadow ${token.motionDurationFast}`,
'&:hover, &-focused': {
...genHoverStyle(token),
@ -953,7 +953,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
transform: 'translateY(-50%)',
cursor: 'pointer',
opacity: 0,
transition: `opacity ${token.motionDurationSlow}, color ${token.motionDurationSlow}`,
transition: `opacity ${token.motionDurationFast}, color ${token.motionDurationFast}`,
'> *': {
verticalAlign: 'top',

3
components/drawer/style/index.tsx
View File

@ -19,6 +19,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
colorBgMask,
colorBgElevated,
motionDurationSlow,
motionDurationFast,
padding,
paddingLG,
fontSizeLG,
@ -152,7 +153,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
border: 0,
outline: 0,
cursor: 'pointer',
transition: `color ${motionDurationSlow}`,
transition: `color ${motionDurationFast}`,
textRendering: 'auto',
'&:focus, &:hover': {

3
components/input-number/style/index.tsx
View File

@ -38,7 +38,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
colorPrimary,
controlHeight,
inputPaddingHorizontal,
motionDurationSlow,
colorBgContainer,
motionDurationMid,
colorTextDisabled,
@ -149,7 +148,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
border: 0,
borderRadius: controlRadius,
outline: 0,
transition: `all ${motionDurationSlow} linear`,
transition: `all ${motionDurationFast} linear`,
appearance: 'textfield',
...genPlaceholderStyle(token.colorTextPlaceholder),

2
components/input/style/index.tsx
View File

@ -129,7 +129,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
borderStyle: token.controlLineType,
borderColor: token.colorBorder,
borderRadius: token.controlRadius,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
...genPlaceholderStyle(token.colorTextPlaceholder),
'&:hover': {

12
components/radio/style/index.tsx
View File

@ -71,6 +71,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
radioFocusShadow,
radioSize,
motionDurationSlow,
motionDurationFast,
motionEaseInOut,
motionEaseInOutCirc,
radioButtonBg,
@ -182,7 +183,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = token => {
borderStyle: 'solid',
borderWidth: controlLineWidth,
borderRadius: '50%',
transition: `all ${motionDurationSlow}`,
transition: `all ${motionDurationFast}`,
},
[`${componentCls}-input`]: {
@ -250,6 +251,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
controlLineType,
colorBorder,
motionDurationSlow,
motionDurationFast,
radioButtonPaddingHorizontal,
fontSize,
radioButtonBg,
@ -291,10 +293,10 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = token => {
borderInlineEndWidth: controlLineWidth,
cursor: 'pointer',
transition: [
`color ${motionDurationSlow}`,
`background ${motionDurationSlow}`,
`border-color ${motionDurationSlow}`,
`box-shadow ${motionDurationSlow}`,
`color ${motionDurationFast}`,
`background ${motionDurationFast}`,
`border-color ${motionDurationFast}`,
`box-shadow ${motionDurationFast}`,
].join(','),
a: {

4
components/rate/style/index.tsx
View File

@ -27,7 +27,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
},
'> div': {
transition: `all ${token.motionDurationSlow}, outline 0s`,
transition: `all ${token.motionDurationFast}, outline 0s`,
'&:hover': {
transform: token.rateStarHoverScale,
@ -45,7 +45,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = token => {
'&-first, &-second': {
color: token.defaultColor,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
userSelect: 'none',
[token.iconCls]: {

4
components/segmented/style/index.tsx
View File

@ -54,7 +54,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
color: token.labelColor,
backgroundColor: token.bgColor,
borderRadius: token.controlRadius,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
[`${componentCls}-group`]: {
position: 'relative',
@ -84,7 +84,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
position: 'relative',
textAlign: 'center',
cursor: 'pointer',
transition: `color ${token.motionDurationSlow} ${token.motionEaseInOut}, background-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
transition: `color ${token.motionDurationFast} ${token.motionEaseInOut}, background-color ${token.motionDurationFast} ${token.motionEaseInOut}`,
borderRadius: token.controlRadiusSM,
'&-selected': {

4
components/select/style/index.tsx
View File

@ -23,7 +23,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = token => {
position: 'relative',
backgroundColor: token.colorBgContainer,
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`,
transition: `all ${token.motionDurationFast} ${token.motionEaseInOut}`,
input: {
cursor: 'pointer',
@ -218,7 +218,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
background: token.colorBgContainer,
cursor: 'pointer',
opacity: 0,
transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`,
transition: `color ${token.motionDurationFast} ease, opacity ${token.motionDurationSlow} ease`,
textRendering: 'auto',
'&:before': {

4
components/skeleton/style/index.tsx
View File

@ -363,11 +363,11 @@ export default genComponentStyleHook(
return [genBaseStyle(skeletonToken)];
},
token => {
const { colorFillContent, colorTextPlaceholder } = token;
const { colorFillContent, colorFill } = token;
return {
color: colorFillContent,
colorGradientEnd: colorTextPlaceholder,
colorGradientEnd: colorFill,
};
},
);

8
components/slider/style/index.tsx
View File

@ -58,14 +58,14 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
position: 'absolute',
backgroundColor: token.colorFillTertiary,
borderRadius: token.controlRadiusXS,
transition: `background-color ${token.motionDurationSlow}`,
transition: `background-color ${token.motionDurationFast}`,
},
[`${componentCls}-track`]: {
position: 'absolute',
backgroundColor: token.colorPrimaryBorder,
borderRadius: token.controlRadiusXS,
transition: `background-color ${token.motionDurationSlow}`,
transition: `background-color ${token.motionDurationFast}`,
},
[`${componentCls}-handle`]: {
@ -78,8 +78,8 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
borderRadius: '50%',
cursor: 'pointer',
transition: `
border ${token.motionDurationSlow},
outline ${token.motionDurationSlow}
border ${token.motionDurationFast},
outline ${token.motionDurationFast}
`,
[`${componentCls}-dragging`]: {

2
components/switch/style/index.tsx
View File

@ -156,7 +156,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
border: '0',
borderRadius: 100,
cursor: 'pointer',
transition: `all ${token.switchDuration}`,
transition: `all ${token.motionDurationFast}`,
userSelect: 'none',
'&:hover': {

4
components/tag/style/index.tsx
View File

@ -74,7 +74,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`,
borderRadius: token.radiusSM,
opacity: 1,
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
textAlign: 'start',
// RTL
@ -91,7 +91,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
color: token.colorTextDescription,
fontSize: token.tagIconSize,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}`,
transition: `all ${token.motionDurationFast}`,
'&:hover': {
color: token.colorTextHeading,

6
components/tree/style/index.tsx
View File

@ -275,7 +275,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
background: 'transparent',
borderRadius: token.controlRadius,
cursor: 'pointer',
transition: `all ${token.motionDurationSlow}, border 0s, line-height 0s, box-shadow 0s`,
transition: `all ${token.motionDurationFast}, border 0s, line-height 0s, box-shadow 0s`,
'&:hover': {
backgroundColor: token.controlItemBgHover,
@ -387,7 +387,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
insetInlineEnd: 0,
bottom: treeNodePadding,
insetInlineStart: 0,
transition: `background-color ${token.motionDurationSlow}`,
transition: `background-color ${token.motionDurationFast}`,
content: '""',
pointerEvents: 'none',
},
@ -405,7 +405,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => {
// >>> Switcher
[`${treeCls}-switcher`]: {
transition: `color ${token.motionDurationSlow}`,
transition: `color ${token.motionDurationFast}`,
},
// >>> Title