fix for notification animation bug
This commit is contained in:
parent
04f77806ac
commit
dd70fa1348
3 changed files with 47 additions and 46 deletions
|
@ -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')
|
||||||
|
|
|
@ -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({
|
||||||
|
targets: notifcation,
|
||||||
|
marginTop: '0',
|
||||||
|
easing: 'easeInOutQuint',
|
||||||
|
duration: 10,
|
||||||
|
complete: () => {
|
||||||
|
anime({
|
||||||
|
targets: notify,
|
||||||
|
rotateX: '0',
|
||||||
|
easing: 'easeInOutQuint',
|
||||||
|
duration: 700
|
||||||
|
});
|
||||||
anime({
|
anime({
|
||||||
targets: messageText,
|
targets: messageText,
|
||||||
backgroundColor: color,
|
backgroundColor: color,
|
||||||
easing: 'easeInOutQuint',
|
easing: 'easeInOutQuint',
|
||||||
duration: 700,
|
duration: 700,
|
||||||
complete: () => {
|
complete: () => {
|
||||||
|
setTimeout(() => {
|
||||||
if (status !== null) {
|
if (status !== null) {
|
||||||
setTimeout(() => {
|
|
||||||
notify.addEventListener('transitionend', () => {
|
|
||||||
notifcation.style.display = 'none';
|
|
||||||
});
|
|
||||||
notify.classList.add('notify-close');
|
|
||||||
notify.classList.remove('notify-open');
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
/*
|
|
||||||
anime({
|
anime({
|
||||||
targets: message,
|
targets: notify,
|
||||||
marginTop: '-20px',
|
rotateX: '-120',
|
||||||
easing: 'easeInOutQuint',
|
easing: 'easeInOutQuint',
|
||||||
duration: 500,
|
duration: 700,
|
||||||
opacity: 1,
|
|
||||||
complete: () => {
|
complete: () => {
|
||||||
setTimeout(() => {
|
|
||||||
anime({
|
anime({
|
||||||
targets: message,
|
targets: notifcation,
|
||||||
marginTop: '-125px',
|
marginTop: '-55',
|
||||||
easing: 'easeOutQuint',
|
easing: 'easeInOutQuint',
|
||||||
duration: 500,
|
delay: 700,
|
||||||
opacity: 0,
|
duration: 50
|
||||||
complete: () => {
|
});
|
||||||
notifcation.style.display = 'none';
|
//notifcation.style.display = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
*/
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
//--------------------------
|
//--------------------------
|
||||||
|
|
|
@ -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-top: -55px
|
||||||
margin 0
|
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
|
||||||
|
|
Loading…
Reference in a new issue