From 5f60054c1fd2a3c674ead64e95d4c043e730a3a9 Mon Sep 17 00:00:00 2001
From: troy <git@seemsleg.it>
Date: Tue, 8 Nov 2022 18:36:15 +0100
Subject: [PATCH] out animation

---
 frontlog.css | 18 +++++++++++++-----
 frontlog.js  | 16 +++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontlog.css b/frontlog.css
index b19265b..2432dec 100644
--- a/frontlog.css
+++ b/frontlog.css
@@ -9,23 +9,31 @@ flogelem {
   display:block;
   border-width: 1px;
   border-style: solid;
+  border-radius: 8px;
   overflow: hidden;
   max-height: 0;
   margin-bottom: 0;
   padding: 0;
   opacity: 0;
-  -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
-	-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
-  transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s;
+  position: relative;
+  bottom: 0;
+  -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 {
-  max-height: 100px!important;
+  max-height: 200px!important;
   margin-bottom: 1em;
   padding: 4px;
-  border-radius: 8px;
   opacity: 1;
 }
+.flvanish {
+  position: relative;
+  bottom: 3em;
+  max-height: 0 !important;
+  opacity: 0 !important;
+}
 
 fltitle {
   display: block;
diff --git a/frontlog.js b/frontlog.js
index fd5ac4f..1deb409 100644
--- a/frontlog.js
+++ b/frontlog.js
@@ -4,13 +4,15 @@ let frontlog = document.createElement('frontlog');
 document.body.appendChild(frontlog);
 
 let frontlogVanish = function(elem) {
-  elem.remove();
-  //TODO irgendwann hübscher machen
-  let elems = document.getElementsByTagName('flogelem');
-  if(elems.length < frontlogMaxEl && frontlogList.length) {
-    let p = frontlogList.shift();
-    frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
-  }
+  elem.classList.add('flvanish');
+  setTimeout(function() {
+    elem.remove();
+    let elems = document.getElementsByTagName('flogelem');
+    if(elems.length < frontlogMaxEl && frontlogList.length) {
+      let p = frontlogList.shift();
+      frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
+    }
+  },3100);
 }
 
 let frontlogAdd = function(title,icon,msg,col,time) {