refactor: use animations for appearing and disappearing

destinygg · Jul 26, 2024 · 9d0f41a · 9d0f41a
1 parent 70f815f
commit 9d0f41a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git 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
@@ -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;
       }