out animation
This commit is contained in:
parent
1764bbaa24
commit
5f60054c1f
18
frontlog.css
18
frontlog.css
@ -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;
|
||||||
|
|||||||
16
frontlog.js
16
frontlog.js
@ -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) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user