toast animation refactor

ayush013 · Jul 10, 2022 · a20ea99 · a20ea99
1 parent bcc4899
commit a20ea99
Showing 1 changed file with 16 additions and 20 deletions.
diff --git a/toast/src/app/Toast.js b/toast/src/app/Toast.js
@@ -2,7 +2,7 @@ class Toast {
   constructor() {
     this.template = document.getElementById("toast");
     this.parentContainer = document.querySelector(".toast-container");
-    this.timeout = 5000;
+    this.timeout = 3000;
 
     this.create();
   }
@@ -17,26 +17,22 @@ class Toast {
     setTimeout(this.dismissToast, this.timeout);
   }
 
-  animateFadeOutToast = () => {
-    return new Promise((resolve) => {
-      this.toast.animate(
-        [
-          {
-            opacity: 0,
-            transform: "translateY(-50px)",
-          },
-        ],
-        { duration: 300, easing: "ease", fill: "forwards" }
-      );
-      setTimeout(resolve, 300);
-    });
+  animateToastDismiss = () => {
+    this.toast.animate(
+      [
+        {
+          opacity: 0,
+          transform: "translateY(-50px)",
+        },
+      ],
+      { duration: 300, easing: "ease", fill: "forwards" }
+    );
   };
 
   dismissToast = () => {
-    this.animateFadeOutToast().then(() => {
-      this.listenToastAnimationEnd(toast).then(() => {
-        this.toast.remove();
-      });
+    this.animateToastDismiss();
+    this.listenToastAnimationEnd().then(() => {
+      this.toast.remove();
     });
   };
 
@@ -54,8 +50,8 @@ class Toast {
     return text.length > 10 && text.length < 50 ? text : this.getRandomText();
   }
 
-  async listenToastAnimationEnd(toast) {
-    const animationPromises = toast.getAnimations().map((a) => a.finished);
+  async listenToastAnimationEnd() {
+    const animationPromises = this.toast.getAnimations().map((a) => a.finished);
 
     return await Promise.allSettled(animationPromises);
   }