优化一下 modal 的动画效果

scss/components/_modal.scss

@@ -71,7 +71,8 @@
     }
 
     &-overlay {
-        transition: ease-out opacity 0.5;
+        transition: ease-in-out opacity 0.5s;
+        // transition-delay: 0.2s;
         position: fixed;
         top: 0;
         right: 0;
@@ -81,10 +82,13 @@
         background-color: $Modal-overlay-bg;
         opacity: 0;
 
-        &.in,
+        &.in {
-        &.out {
             opacity: 1;
         }
+
+        &.out {
+            opacity: 0;
+        }
     }
 
     &-header {

src/components/Modal.tsx

@@ -87,12 +87,12 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                     mountOnEnter
                     unmountOnExit
                     in={show}
-                    timeout={350}
+                    timeout={1000}
                     onExited={this.handleExited}
                     onEntered={this.handleEntered}
                 >
                     {(status: string) => {
-                        if (status === ENTERING) {
+                        if (status === ENTERING || status === EXITING) {
                             // force reflow
                             // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
                             // 否则看不到动画。