mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-24 15:38:45 +08:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

chore: back motion style

Browse Source
This commit is contained in:
二货机器人 2022-07-29 16:19:01 +08:00
parent 394aba4afe
commit 74ae7f68f0
1 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/drawer/style/motion.tsx Normal file
View File

@ -0,0 +1,126 @@
import type { DrawerToken } from '.';
import type { GenerateStyle } from '../../theme';
const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
const { componentCls, motionDurationSlow } = token;
const sharedPanelMotion = {
'&-enter, &-appear, &-leave': {
'&-start': {
transition: 'none',
},
'&-active': {
transition: `all ${motionDurationSlow}`,
},
},
};
return {
[componentCls]: {
// ======================== Mask ========================
[`${componentCls}-mask-motion`]: {
'&-enter, &-appear, &-leave': {
'&-active': {
transition: `all ${motionDurationSlow}`,
},
},
'&-enter, &-appear': {
opacity: 0,
'&-active': {
opacity: 1,
},
},
'&-leave': {
opacity: 1,
'&-active': {
opacity: 0,
},
},
},
// ======================= Panel ========================
[`${componentCls}-panel-motion`]: {
// Left
'&-left': [
sharedPanelMotion,
{
'&-enter, &-appear': {
transform: 'translateX(-100%)',
'&-active': {
transform: 'translateX(0)',
},
},
'&-leave': {
transform: 'translateX(0)',
'&-active': {
transform: 'translateX(-100%)',
},
},
},
],
// Right
'&-right': [
sharedPanelMotion,
{
'&-enter, &-appear': {
transform: 'translateX(100%)',
'&-active': {
transform: 'translateX(0)',
},
},
'&-leave': {
transform: 'translateX(0)',
'&-active': {
transform: 'translateX(100%)',
},
},
},
],
// Top
'&-top': [
sharedPanelMotion,
{
'&-enter, &-appear': {
transform: 'translateY(-100%)',
'&-active': {
transform: 'translateY(0)',
},
},
'&-leave': {
transform: 'translateY(0)',
'&-active': {
transform: 'translateY(-100%)',
},
},
},
],
// Bottom
'&-bottom': [
sharedPanelMotion,
{
'&-enter, &-appear': {
transform: 'translateY(100%)',
'&-active': {
transform: 'translateY(0)',
},
},
'&-leave': {
transform: 'translateY(0)',
'&-active': {
transform: 'translateY(100%)',
},
},
},
],
},
},
};
};
export default genMotionStyle;