diff --git a/proj/y2t/assets/css/style.css b/proj/y2t/assets/css/style.css index b5ebef7..60b498f 100644 --- a/proj/y2t/assets/css/style.css +++ b/proj/y2t/assets/css/style.css @@ -135,4 +135,38 @@ section#output { section#output div.y2t-output { margin-top: 40px; margin-bottom: 40px; +} + +div.y2t-output { + position: relative; +} + +div.copied { + position: absolute; + background-color: var(--success); + color: white; + font-size: 1.2rem; + padding: 10px; + right: -15px; + top: -10px; + transform: rotate(10deg); +} + +.success { + animation: fade-in 3s forwards; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 30% { + opacity: 1; + } + 80% { + opacity: 1; + } + 100% { + opacity: 0; + } } \ No newline at end of file diff --git a/proj/y2t/assets/js/main.js b/proj/y2t/assets/js/main.js index 9be94d2..8dbd5b0 100644 --- a/proj/y2t/assets/js/main.js +++ b/proj/y2t/assets/js/main.js @@ -31,7 +31,7 @@ Vue.component('copbox',{ successOk(){ this.isSuccess = true; this.$refs.element.addEventListener('animationend', () => { - this.isFaded = false; + this.isSuccess = false; }); } }