fix for notification animation bug

This commit is contained in:
Ro 2020-09-04 16:13:45 -07:00
parent 04f77806ac
commit dd70fa1348
3 changed files with 47 additions and 46 deletions

View file

@ -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') link(rel='stylesheet', href="/assets/css/dash.css", type='text/css')
body body
#notifications.notifications #notifications.notifications
#notifyMessage.notifyMessage.notify-close #notifyMessage.notifyMessage
.notify-icon#notify-good .notify-icon#notify-good
svg(viewBox="0 0 20 20" class="icons") svg(viewBox="0 0 20 20" class="icons")
use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt') use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-emoji-flirt')

View file

@ -16,10 +16,10 @@ export default class Notfications {
//-------------------------- //--------------------------
alert(text, status) { alert(text, status) {
notifcation.style.display = 'block';
iconWorking.style.display = 'none'; iconWorking.style.display = 'none';
iconGood.style.display = 'none'; iconGood.style.display = 'none';
iconLame.style.display = 'none'; iconLame.style.display = 'none';
var color = ''; var color = '';
if (status !== null) { if (status !== null) {
if (status) { if (status) {
@ -35,50 +35,50 @@ export default class Notfications {
color = '#200317'; color = '#200317';
iconWorking.style.display = 'block'; iconWorking.style.display = 'block';
} }
notify.classList.remove('notify-close');
notify.classList.add('notify-open');
messageText.innerHTML = text; messageText.innerHTML = text;
anime({ anime({
targets: messageText, targets: notifcation,
backgroundColor: color, marginTop: '0',
easing: 'easeInOutQuint', easing: 'easeInOutQuint',
duration: 700, duration: 10,
complete: () => { complete: () => {
if (status !== null) { anime({
setTimeout(() => { targets: notify,
notify.addEventListener('transitionend', () => { rotateX: '0',
notifcation.style.display = 'none'; easing: 'easeInOutQuint',
}); duration: 700
notify.classList.add('notify-close'); });
notify.classList.remove('notify-open'); anime({
}, 1000); 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);
}
});
*/
} }
//-------------------------- //--------------------------

View file

@ -20,18 +20,17 @@ svg.icons
perspective 1000px perspective 1000px
position fixed position fixed
z-index 2000 z-index 2000
height 10% height 55x
width 100% width 100%
display none display block
align-items center align-items center
justify-content center justify-content center
padding 0 padding 0
margin 0 margin-top: -55px
margin 0
#notifyMessage #notifyMessage
margin 0 auto 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 //padding-top -125px
height 50px; height 50px;
width 500px width 500px
@ -39,6 +38,8 @@ svg.icons
align-items center align-items center
justify-content center justify-content center
opacity: 1 opacity: 1
transform-style preserve-3d
transform: rotateX(-120deg)
transform-origin: 50% 0; transform-origin: 50% 0;
#notify-good, #notify-lame, #notify-working #notify-good, #notify-lame, #notify-working
display: none display: none