From dd70fa1348f0b415c4e4ec93805237074445c5bd Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Fri, 4 Sep 2020 16:13:45 -0700
Subject: [PATCH] fix for notification animation bug

---
 brain/views/frame.pug           |  2 +-
 src/com/ui/Notifications.js     | 78 ++++++++++++++++-----------------
 src/styles/main/_structure.styl | 13 +++---
 3 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/brain/views/frame.pug b/brain/views/frame.pug
index 21282d7..e72b6c8 100644
--- a/brain/views/frame.pug
+++ b/brain/views/frame.pug
@@ -13,7 +13,7 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
     body
       #notifications.notifications
-        #notifyMessage.notifyMessage.notify-close
+        #notifyMessage.notifyMessage
           .notify-icon#notify-good
             svg(viewBox="0 0 20 20" class="icons")
               use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')
diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js
index dde0f84..ed1d0e1 100644
--- a/src/com/ui/Notifications.js
+++ b/src/com/ui/Notifications.js
@@ -16,10 +16,10 @@ export default class Notfications {
 	//--------------------------
 
 	alert(text, status) {
-		notifcation.style.display = 'block';
 		iconWorking.style.display = 'none';
 		iconGood.style.display = 'none';
 		iconLame.style.display = 'none';
+
 		var color = '';
 		if (status !== null) {
 			if (status) {
@@ -35,50 +35,50 @@ export default class Notfications {
 			color = '#200317';
 			iconWorking.style.display = 'block';
 		}
-
-		notify.classList.remove('notify-close');
-		notify.classList.add('notify-open');
 		messageText.innerHTML = text;
+
 		anime({
-			targets: messageText,
-			backgroundColor: color,
+			targets: notifcation,
+			marginTop: '0',
 			easing: 'easeInOutQuint',
-			duration: 700,
+			duration: 10,
 			complete: () => {
-				if (status !== null) {
-					setTimeout(() => {
-						notify.addEventListener('transitionend', () => {
-							notifcation.style.display = 'none';
-						});
-						notify.classList.add('notify-close');
-						notify.classList.remove('notify-open');
-					}, 1000);
-				}
+				anime({
+					targets: notify,
+					rotateX: '0',
+					easing: 'easeInOutQuint',
+					duration: 700
+				});
+				anime({
+					targets: messageText,
+					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);
+					}
+				});
 			}
 		});
-		/*
-		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);
-			}
-		});
-		*/
 	}
 
 	//--------------------------
diff --git a/src/styles/main/_structure.styl b/src/styles/main/_structure.styl
index 158a604..548a994 100644
--- a/src/styles/main/_structure.styl
+++ b/src/styles/main/_structure.styl
@@ -20,18 +20,17 @@ svg.icons
   perspective 1000px
   position fixed
   z-index 2000
-  height 10%
+  height 55x
   width 100%
-  display none
+  display block
   align-items center
   justify-content center
   padding 0 
-  margin 0
-  
-  
+  margin-top: -55px
+  margin 0  
   #notifyMessage
     margin 0 auto
-    transition all 0.5s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
+    transition all 0.6s cubic-bezier(.83,.05,.28,1.0)//ks-easing( "out-back" );
     //padding-top -125px
     height 50px;
     width 500px
@@ -39,6 +38,8 @@ svg.icons
     align-items center
     justify-content center
     opacity: 1
+    transform-style preserve-3d
+    transform: rotateX(-120deg)
     transform-origin: 50% 0;
     #notify-good, #notify-lame, #notify-working
       display: none