fix(ui): show toast animation

NJUPT-SAST · Feb 12, 2024 · cad4e4e · cad4e4e
1 parent 8c731fc
commit cad4e4e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 75 deletions.
diff --git a/packages/ui/lib/Toast/Toast.module.scss b/packages/ui/lib/Toast/Toast.module.scss
@@ -1,18 +1,35 @@
 @use '../variables' as *;
+$animation-duration: $duration-400;
+$border-radius: $radius-5;
+@mixin animation($name) {
+  animation-name: $name;
+  animation-duration: $animation-duration;
+  animation-timing-function: ease-in-out;
+}
+@mixin type($type-name) {
+  color: var(--#{$type-name}-color);
+  .closeButton {
+    .icon {
+      fill: var(--#{$type-name}-color);
+    }
+  }
+}
 .base {
-  border-radius: 5px;
+  border-radius: $border-radius;
   gap: 10px;
   box-sizing: border-box;
   opacity: 0;
+  transform: translateY(100px);
   overflow: hidden;
-  transition: all 0.3s ease-in;
+  transition: all $animation-duration ease-in-out;
   padding: 12px 10px 16px 20px;
   display: flex !important;
   @include shadow;
   background-color: var(--white-color);
   &.visible {
     opacity: 1;
     scale: 1;
+    transform: translateY(0);
   }
   .sider {
     position: absolute;
@@ -50,7 +67,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      transition: all 0.4s ease-in-out;
+      transition: all $animation-duration ease-in-out;
       &:hover {
         scale: 1.05;
       }
@@ -68,36 +85,16 @@
     margin-top: 10px;
   }
   &.info {
-    color: var(--primary-color);
-    .closeButton {
-      .icon {
-        fill: var(--primary-color);
-      }
-    }
+    @include type(primary);
   }
   &.success {
-    color: var(--success-color);
-    .closeButton {
-      .icon {
-        fill: var(--success-color);
-      }
-    }
+    @include type(success);
   }
   &.warning {
-    color: var(--warning-color);
-    .closeButton {
-      .icon {
-        fill: var(--warning-color);
-      }
-    }
+    @include type(warning);
   }
   &.error {
-    color: var(--danger-color);
-    .closeButton {
-      .icon {
-        fill: var(--danger-color);
-      }
-    }
+    @include type(danger);
   }
   &.small {
     width: 300px;
@@ -123,47 +120,26 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-}
-.toastShow {
-  position: fixed;
-  right: 10px;
-  bottom: 10px;
-  animation-name: slideIn;
-  animation-duration: 0.4s;
-  transition: all 0.4s ease-in-out;
-}
-
-.toastHide {
-  position: fixed;
-  right: 10px;
-  bottom: 10px;
-  animation-name: slideHide;
-  animation-duration: 0.8s;
+  .toastShow {
+    position: fixed;
+    right: 10px;
+    bottom: 10px;
+    @include animation(slideIn);
+    transition: all $animation-duration ease-in-out;
+  }
+  .toastHide {
+    bottom: -100px;
+    opacity: 0;
+  }
 }
 
 @keyframes slideIn {
   from {
-    opacity: 0;
+    opacity: 0.2;
     transform: translateY(100%);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
-
-@keyframes slideHide {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(100%);
-  }
-}
-
-.dataExpand {
-  transform: translateY(-200px) !important;
-}
diff --git a/packages/ui/lib/Toast/Toast.tsx b/packages/ui/lib/Toast/Toast.tsx
@@ -47,7 +47,6 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     ref,
   ) => {
     const [visible, setVisble] = useState(true);
-    const [innerVisible, setInnerVisible] = useState(true);
 
     const toastClass = classNames(
       styles['base'],
@@ -58,18 +57,12 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
     );
 
     useEffect(() => {
-      if (!visible && close) {
-        // A delay is set here, in order to see the animation in its entirety
-        setTimeout(() => {
-          setInnerVisible(false);
-          close();
-        }, 300);
-      }
+      if (!visible && close) close();
     }, [visible, close]);
 
     return (
       <>
-        {innerVisible && (
+        {
           <div style={{ padding: '10px' }}>
             <div
               ref={ref}
@@ -102,7 +95,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
               </div>
             </div>
           </div>
-        )}
+        }
       </>
     );
   },

diff --git a/packages/ui/lib/Toast/showToast.tsx b/packages/ui/lib/Toast/showToast.tsx
@@ -41,13 +41,12 @@ export const showToast = (props?: ToastProps) => {
 const moreTimeClose = (div: HTMLDivElement) => {
   setTimeout(() => {
     const ToasthideClass: string = classNames(styles['toastHide']);
-    div.className = ToasthideClass;
-
+    div.classList.add(ToasthideClass);
     setTimeout(() => {
       toastContainer?.removeChild(div);
       toasts = toasts.filter((toast) => toast !== div);
-    }, 300);
-  }, 6000);
+    }, 400);
+  }, 5000);
 };
 
 const moreThreeClose = () => {
@@ -62,7 +61,9 @@ const moreThreeClose = () => {
 };
 
 const closeToast = (div: HTMLDivElement) => {
-  div.remove();
+  setTimeout(() => {
+    div.remove();
+  }, 300);
   toasts = toasts.filter((toast) => toast !== div);
   addListener(div);
   expand(toasts);