maint(frontend): add animation when img and element show

pywebio/html/css/app.css

@@ -91,4 +91,41 @@ h5.card-header:empty {
 
 button {
     margin-bottom: 8px;
-}
+}
+
+.input-container .form-group {
+    margin-bottom: 0;
+}
+
+img {
+    -webkit-animation-name: image-load-in;
+    animation-name: image-load-in;
+    -webkit-animation-duration: .6s;
+    animation-duration: .6s
+}
+
+@-webkit-keyframes image-load-in {
+    0% {
+        -webkit-filter: blur(8px);
+        filter: blur(8px);
+        opacity: 0
+    }
+    100% {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        opacity: 1
+    }
+}
+
+@keyframes image-load-in {
+    0% {
+        -webkit-filter: blur(8px);
+        filter: blur(8px);
+        opacity: 0
+    }
+    100% {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        opacity: 1
+    }
+}

pywebio/html/js/pywebio.js

@@ -152,6 +152,7 @@
             }
 
             var elem = OutputController.prototype[func_name].call(this, msg.spec);
+            elem.hide();
             if (msg.spec.anchor !== undefined && this.container_elem.find(`#${msg.spec.anchor}`).length) {
                 var pos = this.container_elem.find(`#${msg.spec.anchor}`);
                 pos.empty().append(elem);
@@ -169,6 +170,7 @@
                     scroll_bottom = true;
                 }
             }
+            elem.fadeIn();
         } else if (msg.command === 'output_ctl') {
             this.handle_output_ctl(msg);
         }