mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

fix: collapse motion (#36477)

Browse Source
This commit is contained in:
MadCcc 2022-07-12 14:32:54 +08:00 committed by GitHub
parent 94a3d51cb0
commit 98994ab692
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/collapse/style/index.tsx
View File

@ -30,6 +30,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
marginSM,
paddingSM,
motionDurationSlow,
fontSizeIcon,
} = token;
const borderBase = `${controlLineWidth}px ${controlLineType} ${colorBorder}`;
@ -81,6 +82,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
[`${componentCls}-arrow`]: {
...resetIcon(),
fontSize: fontSizeIcon,
svg: {
transition: `transform ${motionDurationSlow}`,
@ -231,6 +233,26 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
};
};
const genMotion: GenerateStyle<CollapseToken> = 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`,
},
},
[`${token.antCls}-motion-collapse`]: {
overflow: 'hidden',
transition: `height ${token.motionDurationMid} ${token.motionEaseInOut},
opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`,
},
},
});
export default genComponentStyleHook('Collapse', token => {
const collapseToken = mergeToken<CollapseToken>(token, {
collapseContentBg: token.colorBgContainer,
@ -244,5 +266,6 @@ export default genComponentStyleHook('Collapse', token => {
genBaseStyle(collapseToken),
genBorderlessStyle(collapseToken),
genArrowStyle(collapseToken),
genMotion(collapseToken),
];
});