From 9c54c89fcfd33cb70845bbba3aa71fdaa4b1d445 Mon Sep 17 00:00:00 2001
From: edbrz9 <ed@brz9.devd>
Date: Fri, 30 Dec 2022 19:28:33 +0100
Subject: [PATCH] fix css and js for success animation
---
proj/y2t/assets/css/style.css | 34 ++++++++++++++++++++++++++++++++++
proj/y2t/assets/js/main.js | 2 +-
2 files changed, 35 insertions(+), 1 deletion(-)
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;
});
}
}