mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

style(progress): support animation in rtl direction (#43316)

Browse Source
This commit is contained in:
JiaQi 2023-07-03 17:12:13 +08:00 committed by GitHub
parent c583d3217b
commit b46c2d062b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/progress/style/index.tsx
View File

@ -1,8 +1,8 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs';
import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style';
export interface ComponentToken {}
@ -16,20 +16,23 @@ interface ProgressToken extends FullToken<'Progress'> {
progressActiveMotionDuration: string;
}
const antProgressActive = new Keyframes('antProgressActive', {
'0%': {
transform: 'translateX(-100%) scaleX(0)',
opacity: 0.1,
},
'20%': {
transform: 'translateX(-100%) scaleX(0)',
opacity: 0.5,
},
to: {
transform: 'translateX(0) scaleX(1)',
opacity: 0,
},
});
const genAntProgressActive = (isRtl?: boolean) => {
const direction = isRtl ? '100%' : '-100%';
return new Keyframes(`antProgress${isRtl ? 'RTL' : 'LTR'}Active`, {
'0%': {
transform: `translateX(${direction}) scaleX(0)`,
opacity: 0.1,
},
'20%': {
transform: `translateX(${direction}) scaleX(0)`,
opacity: 0.5,
},
to: {
transform: 'translateX(0) scaleX(1)',
opacity: 0,
},
});
};
const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
const { componentCls: progressCls, iconCls: iconPrefixCls } = token;
@ -116,7 +119,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
backgroundColor: token.colorBgContainer,
borderRadius: token.progressLineRadius,
opacity: 0,
animationName: antProgressActive,
animationName: genAntProgressActive(),
animationDuration: token.progressActiveMotionDuration,
animationTimingFunction: token.motionEaseOutQuint,
animationIterationCount: 'infinite',
@ -124,6 +127,12 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
},
},
[`&${progressCls}-rtl${progressCls}-status-active`]: {
[`${progressCls}-bg::before`]: {
animationName: genAntProgressActive(true),
},
},
[`&${progressCls}-status-exception`]: {
[`${progressCls}-bg`]: {
backgroundColor: token.colorError,