diff --git a/src/popup/pwgen.css b/src/popup/pwgen.css index 69eb96f..2c4c388 100644 --- a/src/popup/pwgen.css +++ b/src/popup/pwgen.css @@ -26,7 +26,7 @@ input[type="checkbox"] { margin-bottom: -7px; } -#copied { +.copied { /*height: 100%;*/ width: 100%; background-color: #FFF8DC; @@ -36,3 +36,15 @@ input[type="checkbox"] { padding: 5px; text-align: center; } + +.fadein { + visibility: visible; + opacity: 1; + transition: opacity 1s linear; +} + +.fadeout { + visibility: hidden; + opacity: 0; + transition: visibility 0s 1s, opacity 1s linear; +} diff --git a/src/popup/pwgen.html b/src/popup/pwgen.html index 87f82fd..0b7119f 100644 --- a/src/popup/pwgen.html +++ b/src/popup/pwgen.html @@ -10,7 +10,7 @@ - +
diff --git a/src/popup/pwgen.js b/src/popup/pwgen.js index af02975..09a7ed3 100644 --- a/src/popup/pwgen.js +++ b/src/popup/pwgen.js @@ -42,21 +42,22 @@ function copypasstoclippboard(cb) { if (typeof(cb) === 'function') { cb(); } - fade(document.getElementById('copied')); + fade(document.getElementsByClassName('copied')[0]); }, 200); } function fade(element) { - element.style.display = 'block'; - var op = 1; // initial opacity - var timer = setInterval(function () { - if (op <= 0.1) { - clearInterval(timer); - element.style.display = 'none'; - } - element.style.opacity = op; - op -= op * 0.1; - }, 50); + var clone = element.cloneNode(true); + clone.style.display = 'block'; + element.parentNode.insertBefore(clone, element.nextSibling); + + setTimeout(() => { + clone.className += ' fadeout'; + }, 500); + + setTimeout(() => { + clone.remove(); + }, 1100); } document.addEventListener('DOMContentLoaded', function() {