Fipamo/src/com/ui/Notifications.js

import anime from 'animejs/lib/anime.es.js';
const notifcation = document.getElementById('notifications');
const message = document.getElementById('notifyMessage');
const messageText = document.getElementById('message-text');
export default class Notfications {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {}
	//--------------------------
	// methods
	//--------------------------

	alert(text, status) {
		messageText.innerHTML = text;
		notifcation.style.display = 'flex';
		var color = '';
		status ? (color = '#32cd32') : (color = '#F64747');
		anime({
			targets: messageText,
			backgroundColor: color,
			easing: 'easeInOutQuint',
			duration: 500,
			complete: () => {
				setTimeout(() => {
					anime({
						targets: messageText,
						backgroundColor: '#374857',
						easing: 'easeOutQuint',
						duration: 500
					});
				}, 1000);
			}
		});
		anime({
			targets: message,
			marginTop: '-20px',
			easing: 'easeInOutQuint',
			duration: 500,
			opacity: 1,
			complete: () => {
				setTimeout(() => {
					anime({
						targets: message,
						marginTop: '-125px',
						easing: 'easeOutQuint',
						duration: 500,
						opacity: 0,
						complete: () => {
							notifcation.style.display = 'none';
						}
					});
				}, 1000);
			}
		});
	}

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