diff index.html @ 1:30cd1768611b

Hide when box is empty
author nanaya <me@myconan.net>
date Sat, 15 Oct 2016 16:59:59 +0900
parents 6b5cab0b3f91
children f27dbbc6e978
line wrap: on
line diff
--- a/index.html	Sat Oct 15 16:38:11 2016 +0900
+++ b/index.html	Sat Oct 15 16:59:59 2016 +0900
@@ -45,6 +45,14 @@
             flex: 1;
         }
 
+        .outputbox {
+            will-change: opacity;
+        }
+
+        .outputbox.js-hidden {
+            opacity: 0;
+        }
+
         .title {
             font-size: 16px;
         }
@@ -61,7 +69,7 @@
 
             <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
 
-            <div class="js-qr-output"></div>
+            <div class="outputbox js-qr-output"></div>
         </div>
 
         <div>
@@ -83,6 +91,9 @@
 
             if (text !== "") {
                 qr.makeCode(text);
+                outputDom.classList.remove('js-hidden');
+            } else {
+                outputDom.classList.add('js-hidden');
             }
         });
     </script>