mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-25 08:43:57 +08:00
14a1e6bd51
* 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
79 lines
1.8 KiB
TypeScript
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;
|