kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-01 22:41:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(modal): optimize the animation of layer

Browse Source
This commit is contained in:
unix
2020-06-28 14:27:23 +08:00
parent b6eddbc2f1
commit 145fbcd9fb
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/modal/modal-wrapper.tsx
View File

@@ -45,14 +45,14 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
padding: ${theme.layout.gap};
box-shadow: ${theme.expressiveness.shadowLarge};
opacity: 0;
transform: translate3d(0px, -40px, 0px);
transform: translate3d(0px, -30px, 0px);
transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s,
transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.wrapper-enter {
opacity: 0;
transform: translate3d(0px, -40px, 0px);
transform: translate3d(0px, -30px, 0px);
}
.wrapper-enter-active {
@@ -67,7 +67,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
.wrapper-leave-active {
opacity: 0;
transform: translate3d(0px, -50px, 0px);
transform: translate3d(0px, -30px, 0px);
}
`}</style>
</div>

18
components/shared/backdrop.tsx
View File

@@ -37,7 +37,7 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
}
return (
<CSSTransition visible={visible} clearTime={300}>
<CSSTransition name="backdrop-wrapper" visible={visible} clearTime={300}>
<div className="backdrop" onClick={clickHandler} onMouseUp={mouseUpHandler}>
<div className="layer" />
<div
@@ -93,6 +93,22 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
pointer-events: none;
z-index: 1000;
}
.backdrop-wrapper-enter .layer {
opacity: 0;
}
.backdrop-wrapper-enter-active .layer {
opacity: ${theme.expressiveness.portalOpacity};
}
.backdrop-wrapper-leave .layer {
opacity: ${theme.expressiveness.portalOpacity};
}
.backdrop-wrapper-leave-active .layer {
opacity: 0;
}
`}</style>
</div>
</CSSTransition>