ant-design/components/drawer/style/motion.ts
叶枫 14a1e6bd51
feat: tsconfig enable strict (#47998)
* feat: tsconfig enable strict

* feat: add no-explicit-any

* feat: strict

* feat: as THEME

* feat: 优化 keys 类型写法

* feat: demo remove any

* feat: as number

* feat: this any

* feat: add eslint

* feat: cascader

* feat: props any

* feat: remove any

* feat: remove any

* feat: any 提示错误

* feat: remove any

* feat: add eslint

* feat: 允许 T = any 存在

* feat: color funciton

* feat: 恢复 lint

* feat: merge master

* feat: as ReactElement

* feat: type
2024-04-01 15:49:45 +08:00

79 lines
1.8 KiB
TypeScript

import type { DrawerToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
type Direction = 'left' | 'right' | 'top' | 'bottom';
const getMoveTranslate = (direction: Direction) => {
const value = '100%';
return {
left: `translateX(-${value})`,
right: `translateX(${value})`,
top: `translateY(-${value})`,
bottom: `translateY(${value})`,
}[direction];
};
const getEnterLeaveStyle = (startStyle: React.CSSProperties, endStyle: React.CSSProperties) => ({
'&-enter, &-appear': {
...startStyle,
'&-active': endStyle,
},
'&-leave': {
...endStyle,
'&-active': startStyle,
},
});
const getFadeStyle = (from: number, duration: string) => ({
'&-enter, &-appear, &-leave': {
'&-start': {
transition: 'none',
},
'&-active': {
transition: `all ${duration}`,
},
},
...getEnterLeaveStyle(
{
opacity: from,
},
{
opacity: 1,
},
),
});
const getPanelMotionStyles = (direction: Direction, duration: string) => [
getFadeStyle(0.7, duration),
getEnterLeaveStyle(
{
transform: getMoveTranslate(direction),
},
{
transform: 'none',
},
),
];
const genMotionStyle: GenerateStyle<DrawerToken> = (token) => {
const { componentCls, motionDurationSlow } = token;
return {
[componentCls]: {
// ======================== Mask ========================
[`${componentCls}-mask-motion`]: getFadeStyle(0, motionDurationSlow),
// ======================= Panel ========================
[`${componentCls}-panel-motion`]: ['left', 'right', 'top', 'bottom'].reduce(
(obj, direction) => ({
...obj,
[`&-${direction}`]: getPanelMotionStyles(direction as Direction, motionDurationSlow),
}),
{},
),
},
};
};
export default genMotionStyle;