mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fix: FloatButton motion (#39061)

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

45
components/float-button/style/index.tsx
View File

@ -4,6 +4,7 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { initFadeMotion } from '../../style/motion/fade';
import { resetComponent } from '../../style';
import { initMotion } from '../../style/motion/motion';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
@ -23,9 +24,8 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
floatButtonInsetInlineEnd: number;
};
// ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const { componentCls, floatButtonSize, margin, borderRadius, motionDurationSlow } = token;
const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
const { componentCls, floatButtonSize, motionDurationSlow, motionEaseInOutCirc } = token;
const groupPrefixCls = `${componentCls}-group`;
const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
'0%': {
@ -53,6 +53,35 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
opacity: 0,
},
});
return [
{
[`${groupPrefixCls}-wrap`]: {
...initMotion(`${groupPrefixCls}-wrap`, moveDownIn, moveDownOut, motionDurationSlow, true),
},
},
{
[`${groupPrefixCls}-wrap`]: {
[`
&${groupPrefixCls}-wrap-enter,
&${groupPrefixCls}-wrap-appear
`]: {
opacity: 0,
animationTimingFunction: motionEaseInOutCirc,
},
[`&${groupPrefixCls}-wrap-leave`]: {
animationTimingFunction: motionEaseInOutCirc,
},
},
},
];
};
// ============================== Group ==============================
const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
const { componentCls, floatButtonSize, margin, borderRadius } = token;
const groupPrefixCls = `${componentCls}-group`;
return {
[groupPrefixCls]: {
...resetComponent(token),
@ -135,15 +164,6 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
},
},
[`${groupPrefixCls}-wrap-enter,${groupPrefixCls}-wrap-enter-active`]: {
animationName: moveDownIn,
animationDuration: motionDurationSlow,
},
[`${groupPrefixCls}-wrap-leave`]: {
animationName: moveDownOut,
animationDuration: motionDurationSlow,
},
[`${groupPrefixCls}-circle-shadow`]: {
boxShadow: 'none',
},
@ -308,5 +328,6 @@ export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => {
floatButtonGroupStyle(floatButtonToken),
sharedFloatButtonStyle(floatButtonToken),
initFadeMotion(token),
initFloatButtonGroupMotion(floatButtonToken),
];
});