diff --git a/src/toasts.ts b/src/toasts.ts index b9eda54a38..5dd324d2ba 100644 --- 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 {