Mercurial > qr-html
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>