s2/pwgen-reloaded
1
0
Fork 0
mirror of https://github.com/S2-/pwgen.git synced 2025-08-02 08:50:04 +02:00
Code Issues Releases Wiki Activity

use css for transition

Browse Source
This commit is contained in:
s2
2017-11-22 12:06:55 +01:00
parent 0d6278cd82
commit 4d7fefccfc
3 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/popup/pwgen.css
View File

@@ -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;
}

2
src/popup/pwgen.html
View File

@@ -10,7 +10,7 @@
</head>
<body>
<div id="copied" style="display: none;">password copied to clipboard</div>
<div class="copied" style="display: none;">password copied to clipboard</div>
<form>

23
src/popup/pwgen.js
View File

@@ -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() {