ant-design/components/float-button/style/keyframes.ts
𝑾𝒖𝒙𝒉 828f512747
fix: improve CSS cheker & fix lint errors (#53236)
* chore: add csslint

* chore: update

* chore: update

* fix css lint

* fix css lint

* fix css lint

* fix csslint

* fix css lint

* fix css lint

* fix css lint

* fix css lint

* fix css lint appearance

https://developer.mozilla.org/zh-CN/docs/Web/CSS/appearance

* fix csslint conic-gradient

* chore: fix lint tree-select

* chore: update logic

* Revert "fix css lint"

This reverts commit 094f58adbb.

* Revert "fix css lint"

This reverts commit 50da87be3a.

* chore: fix css

* chore: update

* chore: rm redundant

* chore: revert change

* chore: update

* chore: update
2025-03-22 03:09:03 +00:00

154 lines
4.2 KiB
TypeScript

import { Keyframes, unit } from '@ant-design/cssinjs';
import type { FloatButtonToken } from '.';
import { initMotion } from '../../style/motion/motion';
const floatButtonGroupMotion = (token: FloatButtonToken) => {
const { componentCls, floatButtonSize, motionDurationSlow, motionEaseInOutCirc, calc } = token;
const moveTopIn = new Keyframes('antFloatButtonMoveTopIn', {
'0%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveTopOut = new Keyframes('antFloatButtonMoveTopOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveRightIn = new Keyframes('antFloatButtonMoveRightIn', {
'0%': {
transform: `translate3d(${unit(calc(floatButtonSize).mul(-1).equal())}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveRightOut = new Keyframes('antFloatButtonMoveRightOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(${unit(calc(floatButtonSize).mul(-1).equal())}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveBottomIn = new Keyframes('antFloatButtonMoveBottomIn', {
'0%': {
transform: `translate3d(0, ${unit(calc(floatButtonSize).mul(-1).equal())}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveBottomOut = new Keyframes('antFloatButtonMoveBottomOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(0, ${unit(calc(floatButtonSize).mul(-1).equal())}, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const moveLeftIn = new Keyframes('antFloatButtonMoveLeftIn', {
'0%': {
transform: `translate3d(${unit(floatButtonSize)}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
'100%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
});
const moveLeftOut = new Keyframes('antFloatButtonMoveLeftOut', {
'0%': {
transform: 'translate3d(0, 0, 0)',
transformOrigin: '0 0',
opacity: 1,
},
'100%': {
transform: `translate3d(${unit(floatButtonSize)}, 0, 0)`,
transformOrigin: '0 0',
opacity: 0,
},
});
const groupPrefixCls = `${componentCls}-group`;
return [
{
[groupPrefixCls]: {
[`&${groupPrefixCls}-top ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveTopIn,
moveTopOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-bottom ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveBottomIn,
moveBottomOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-left ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveLeftIn,
moveLeftOut,
motionDurationSlow,
true,
),
[`&${groupPrefixCls}-right ${groupPrefixCls}-wrap`]: initMotion(
`${groupPrefixCls}-wrap`,
moveRightIn,
moveRightOut,
motionDurationSlow,
true,
),
},
},
{
[`${groupPrefixCls}-wrap`]: {
[`&${groupPrefixCls}-wrap-enter, &${groupPrefixCls}-wrap-appear`]: {
opacity: 0,
animationTimingFunction: motionEaseInOutCirc,
},
[`&${groupPrefixCls}-wrap-leave`]: {
opacity: 1,
animationTimingFunction: motionEaseInOutCirc,
},
},
},
];
};
export default floatButtonGroupMotion;