From 9d0f41ab17778b8936fa7838cd1a3a226b59bb5f Mon Sep 17 00:00:00 2001
From: vyneer <vyn33r@gmail.com>
Date: Fri, 26 Jul 2024 17:15:06 +0300
Subject: [PATCH] refactor: use animations for appearing and disappearing

---
 assets/chat/css/style.scss           | 37 +++++++++++++++++++---------
 assets/chat/js/menus/ChatEventBar.js |  7 ++----
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index 4f9c26a1..f0882d81 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -785,24 +785,15 @@ hr {
 
   .event-bar-button {
     cursor: pointer;
-    transition:
-      transform 500ms,
-      opacity 500ms;
-    opacity: 0;
-    transform: scale(0.1);
-
-    &.active {
-      transform: unset;
-      opacity: 1;
-    }
+    animation: event-bar-appear 500ms linear;
 
     &:hover {
       transition: transform 100ms;
-      transform: scale(1.05) !important;
+      transform: scale(1.05);
     }
 
     &.removed {
-      transform: scale(0.1) !important;
+      animation: event-bar-disappear 500ms linear;
     }
   }
 
@@ -850,6 +841,28 @@ hr {
   }
 }
 
+@keyframes event-bar-appear {
+  0% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes event-bar-disappear {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(0.1);
+    opacity: 0;
+  }
+}
+
 @keyframes scrolling-event-username {
   25%,
   50% {
diff --git a/assets/chat/js/menus/ChatEventBar.js b/assets/chat/js/menus/ChatEventBar.js
index 8f196659..f6977b59 100644
--- a/assets/chat/js/menus/ChatEventBar.js
+++ b/assets/chat/js/menus/ChatEventBar.js
@@ -54,9 +54,6 @@ export default class ChatEventBar {
     eventButton.append(eventMessageUI);
 
     this.eventBarUI.prepend(eventButton);
-    setTimeout(() => {
-      eventButton.classList.add('active');
-    }, 1);
 
     // Update chat window to fix the scroll position
     this.chat.mainwindow.update();
@@ -68,11 +65,11 @@ export default class ChatEventBar {
       percentageLeft = this.calculateExpiryPercentage(event);
 
       if (percentageLeft <= 0) {
-        eventButton.addEventListener('transitionend', () => {
+        eventButton.addEventListener('animationend', () => {
           eventButton.remove();
           clearInterval(intervalID);
         });
-        eventButton.classList.replace('active', 'removed');
+        eventButton.classList.add('removed');
         return;
       }