修复 toast 最后一个出场动画闪烁的问题

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;
     }
-}
+}

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}