refactor(toasts): removed animejs

materializecss · Dec 15, 2023 · 9534e8a · 9534e8a
1 parent 339a3c8
commit 9534e8a
Showing 1 changed file with 34 additions and 37 deletions.
diff --git a/src/toasts.ts b/src/toasts.ts
@@ -1,5 +1,3 @@
-import anim from "animejs";
-
 import { BaseOptions } from "./component";
 
 export interface ToastOptions extends BaseOptions {
@@ -207,36 +205,32 @@ export class Toast {
     const toast = this.options.toastId 
       ? document.getElementById(this.options.toastId)
       : document.createElement('div');
-    //const toast = document.createElement('div');
     toast.classList.add('toast');
     toast.setAttribute('role', 'alert');
     toast.setAttribute('aria-live', 'assertive');
     toast.setAttribute('aria-atomic', 'true');
-
     // Add custom classes onto toast
     if (this.options.classes.length > 0) {
       toast.classList.add(...this.options.classes.split(' '));
     }
-
-    // Set text content
-    if (this.message)
-      toast.innerText = this.message;
-
-    // Append toast
+    if (this.message) toast.innerText = this.message;
     Toast._container.appendChild(toast);
     return toast;
   }
 
   _animateIn() {
     // Animate toast in
-    this.el.style.display = ""
-    anim({
-      targets: this.el,
-      top: 0,
-      opacity: 1,
-      duration: this.options.inDuration,
-      easing: 'easeOutCubic'
-    });
+    this.el.style.display = "";
+    this.el.style.opacity = '0';
+    // easeOutCubic
+    this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+    setTimeout(() => {
+      this.el.style.top = '0';
+      this.el.style.opacity = '1';      
+    }, 1); 
   }
 
   /**
@@ -271,27 +265,30 @@ export class Toast {
       this.el.style.opacity = '0';
     }
 
-    anim({
-      targets: this.el,
-      opacity: 0,
-      marginTop: -40,
-      duration: this.options.outDuration,
-      easing: 'easeOutExpo',
-      complete: () => {
-        // Call the optional callback
-        if (typeof this.options.completeCallback === 'function') {
-          this.options.completeCallback();
-        }
-        // Remove toast from DOM
-        if (!this.options.toastId) {
-          this.el.remove();
-          Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
-          if (Toast._toasts.length === 0) {
-            Toast._removeContainer();
-          }  
+    // easeOutExpo
+    this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+
+    setTimeout(() => {
+      this.el.style.opacity = '0';
+      this.el.style.marginTop = '-40px';      
+    }, 1);
+
+    setTimeout(() => {
+      // Call the optional callback
+      if (typeof this.options.completeCallback === 'function') {
+        this.options.completeCallback();
+      }
+      // Remove toast from DOM
+      if (!this.options.toastId) {
+        this.el.remove();
+        Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
+        if (Toast._toasts.length === 0) {
+          Toast._removeContainer();
         }
       }
-    });
+    }, this.options.outDuration);
   }
 
   static {