fix css and js for success animation

proj/y2t/assets/css/style.css

@@ -136,3 +136,37 @@ 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;
+  }
+}

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