out animation

This commit is contained in:
troy 2022-11-08 18:36:15 +01:00
parent 1764bbaa24
commit 5f60054c1f
2 changed files with 22 additions and 12 deletions

View File

@ -9,23 +9,31 @@ flogelem {
display:block; display:block;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 8px;
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
opacity: 0; opacity: 0;
-webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; position: relative;
-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; bottom: 0;
transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s; -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
} }
.flshow { .flshow {
max-height: 100px!important; max-height: 200px!important;
margin-bottom: 1em; margin-bottom: 1em;
padding: 4px; padding: 4px;
border-radius: 8px;
opacity: 1; opacity: 1;
} }
.flvanish {
position: relative;
bottom: 3em;
max-height: 0 !important;
opacity: 0 !important;
}
fltitle { fltitle {
display: block; display: block;

View File

@ -4,13 +4,15 @@ let frontlog = document.createElement('frontlog');
document.body.appendChild(frontlog); document.body.appendChild(frontlog);
let frontlogVanish = function(elem) { let frontlogVanish = function(elem) {
elem.remove(); elem.classList.add('flvanish');
//TODO irgendwann hübscher machen setTimeout(function() {
let elems = document.getElementsByTagName('flogelem'); elem.remove();
if(elems.length < frontlogMaxEl && frontlogList.length) { let elems = document.getElementsByTagName('flogelem');
let p = frontlogList.shift(); if(elems.length < frontlogMaxEl && frontlogList.length) {
frontlogPipe(p.title,p.icon,p.msg,p.col,p.time); let p = frontlogList.shift();
} frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
}
},3100);
} }
let frontlogAdd = function(title,icon,msg,col,time) { let frontlogAdd = function(title,icon,msg,col,time) {