fipamo/src/com/ui/Notifications.js

import anime from "animejs/lib/anime.es.js";
const notifcation = document.getElementById("notifications");
const notify = document.getElementById("notifyMessage");
const messageText = document.getElementById("message-text");
const notifyText = document.getElementById("notify-text");
const notifyProgress = document.getElementById("notify-progress");
const iconGood = document.getElementById("notify-good");
const iconLame = document.getElementById("notify-lame");
const iconWorking = document.getElementById("notify-working");

export default class Notfications {
  //--------------------------
  // constructor
  //--------------------------
  constructor() {}
  //--------------------------
  // methods
  //--------------------------

  alert(text, status) {
    iconWorking.style.display = "none";
    iconGood.style.display = "none";
    iconLame.style.display = "none";

    var color = "";
    if (status !== null) {
      anime({
        targets: notifyProgress,
        opacity: 0,
        easing: "easeInOutQuint",
        duration: 500
      });
      if (status) {
        color = "#32cd32";
        iconWorking.style.display = "none";
        iconGood.style.display = "block";
      } else {
        color = "#F64747";
        iconWorking.style.display = "none";
        iconLame.style.display = "block";
      }
    } else {
      color = "#200317";
      iconWorking.style.display = "block";
      anime({
        targets: notifyProgress,
        opacity: 1,
        easing: "easeInOutQuint",
        duration: 500
      });
    }
    messageText.innerHTML = text;

    anime({
      targets: notifcation,
      marginTop: "-10",
      easing: "easeInOutQuint",
      duration: 10,
      complete: () => {
        anime({
          targets: notify,
          rotateX: "0",
          easing: "easeInOutQuint",
          duration: 700
        });
        anime({
          targets: notifyText,
          backgroundColor: color,
          easing: "easeInOutQuint",
          duration: 700,
          complete: () => {
            setTimeout(() => {
              if (status !== null) {
                anime({
                  targets: notify,
                  rotateX: "-120",
                  easing: "easeInOutQuint",
                  duration: 700,
                  complete: () => {
                    anime({
                      targets: notifcation,
                      marginTop: "-55",
                      easing: "easeInOutQuint",
                      delay: 700,
                      duration: 50
                    });
                    //notifcation.style.display = 'none';
                  }
                });
              }
            }, 1000);
          }
        });
      }
    });
  }

  //--------------------------
  // event handlers
  //--------------------------
}