From d3212e8f7235c57ac7e62bb61c15321e52f5331a Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Tue, 5 Nov 2019 15:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20toast=20=E6=9C=80=E5=90=8E?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=87=BA=E5=9C=BA=E5=8A=A8=E7=94=BB=E9=97=AA?=
 =?UTF-8?q?=E7=83=81=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_toast.scss | 24 ++++++++++++------------
 src/components/Toast.tsx    | 25 ++++++++++++-------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/scss/components/_toast.scss b/scss/components/_toast.scss
index ceadd490f..9ab45c3fa 100644
--- a/scss/components/_toast.scss
+++ b/scss/components/_toast.scss
@@ -1,4 +1,5 @@
 @keyframes bounceIn {
+
     from,
     20%,
     40%,
@@ -58,13 +59,14 @@
         pointer-events: none;
         position: fixed;
         z-index: $zindex-toast;
+        width: 100%;
+        height: 100%;
     }
 
     width: $Toast-width;
     pointer-events: auto;
     margin-bottom: $gap-xs;
-    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-        ($Toast-paddingX + $Toast-paddingL);
+    padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast-paddingL);
     box-shadow: $Toast-box-shadow;
     border-radius: $Toast-borderRadius;
     border: $Toast-border-width solid;
@@ -72,25 +74,24 @@
     position: relative;
     opacity: $Toast-opacity;
     cursor: pointer;
+    opacity: 0;
+    transform: translateZ(0);
 
-    &:hover {
+    &.in,
+    &.out {
+        animation-fill-mode: both;
+        animation-duration: 0.75s;
         opacity: 1;
     }
 
     &.in {
-        animation-duration: 0.75s;
         animation-name: bounceIn;
     }
 
     &.out {
-        animation-duration: 0.75s;
         animation-name: bounceOut;
     }
 
-    &.hidden {
-        display: none;
-    }
-
     &-title {
         display: $Toast-display;
         font-size: $fontSizeMd;
@@ -136,8 +137,7 @@
         color: $Toast--info-color;
         border-color: $Toast--info-borderColor;
         background-color: $Toast--info-bgColor;
-        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY
-            ($Toast-paddingX + $Toast--info-paddingL);
+        padding: $Toast-paddingY $Toast-paddingX $Toast-paddingY ($Toast-paddingX + $Toast--info-paddingL);
 
         &::before {
             content: $Toast--info-icon;
@@ -186,4 +186,4 @@
         bottom: $gap-base;
         right: $gap-base;
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 75e2caadc..6c8b56582 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -15,9 +15,8 @@ const fadeStyles: {
     [propName: string]: string;
 } = {
     [ENTERING]: 'in',
-    [ENTERED]: '',
-    [EXITING]: 'out',
-    [EXITED]: 'hidden'
+    [ENTERED]: 'in',
+    [EXITING]: 'out'
 };
 
 let toastRef: any = null;
@@ -192,12 +191,12 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
         visible: false
     };
 
-    content: React.RefObject<HTMLDivElement>;
-    timer: number;
+    // content: React.RefObject<HTMLDivElement>;
+    timer: NodeJS.Timeout;
     constructor(props: ToastMessageProps) {
         super(props);
 
-        this.content = React.createRef();
+        // this.content = React.createRef();
         this.handleMouseEnter = this.handleMouseEnter.bind(this);
         this.handleMouseLeave = this.handleMouseLeave.bind(this);
         this.handleEntered = this.handleEntered.bind(this);
@@ -247,16 +246,16 @@ export class ToastMessage extends React.Component<ToastMessageProps> {
                 onExited={onDismiss}
             >
                 {(status: string) => {
-                    if (status === ENTERING) {
-                        // force reflow
-                        // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
-                        // 否则看不到动画。
-                        this.content.current && this.content.current.offsetWidth;
-                    }
+                    // if (status === ENTERING) {
+                    //     // force reflow
+                    //     // 由于从 mount 进来到加上 in 这个 class 估计是时间太短，上次的样式还没应用进去，所以这里强制reflow一把。
+                    //     // 否则看不到动画。
+                    //     this.content.current && this.content.current.offsetWidth;
+                    // }
 
                     return (
                         <div
-                            ref={this.content}
+                            // ref={this.content}
                             className={cx(`${ns}Toast ${ns}Toast--${level}`, fadeStyles[status])}
                             onMouseEnter={this.handleMouseEnter}
                             onMouseLeave={this.handleMouseLeave}