From 145fbcd9fb23138d9ba28504b8b1da0402003f23 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sun, 28 Jun 2020 14:27:23 +0800
Subject: [PATCH] feat(modal): optimize the animation of layer

---
 components/modal/modal-wrapper.tsx |  6 +++---
 components/shared/backdrop.tsx     | 18 +++++++++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/modal/modal-wrapper.tsx b/components/modal/modal-wrapper.tsx
index 568f81e..3e4c818 100644
--- a/components/modal/modal-wrapper.tsx
+++ b/components/modal/modal-wrapper.tsx
@@ -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>
diff --git a/components/shared/backdrop.tsx b/components/shared/backdrop.tsx
index eb2fc80..6d2419f 100644
--- a/components/shared/backdrop.tsx
+++ b/components/shared/backdrop.tsx
@@ -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>