From dd70fa1348f0b415c4e4ec93805237074445c5bd Mon Sep 17 00:00:00 2001 From: Ro 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