From 090a471744e0f588598cd4d3a47d7f201c26ab4e Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <towerofnix@gmail.com>
Date: Sun, 4 Apr 2021 14:31:14 -0300
Subject: info card animations

---
 static/client.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'static/client.js')

diff --git a/static/client.js b/static/client.js
index b7aa27b..aae0919 100644
--- a/static/client.js
+++ b/static/client.js
@@ -209,10 +209,17 @@ const infoCard = (() => {
 
             container.style.setProperty('--primary-color', data.color);
 
-            container.classList.add('shown');
             container.style.top = window.scrollY + rect.bottom + 'px';
             container.style.left = window.scrollX + rect.left + 'px';
 
+            // Use a short timeout to let a currently hidden (or not yet shown)
+            // info card teleport to the position set a8ove. (If it's currently
+            // shown, it'll transition to that position.)
+            setTimeout(() => {
+                container.classList.remove('hide');
+                container.classList.add('show');
+            }, 50);
+
             const nameLink = container.querySelector('.info-card-name a');
             link(nameLink, 'track', data);
 
@@ -222,7 +229,8 @@ const infoCard = (() => {
     }
 
     function hide() {
-        container.classList.remove('shown');
+        container.classList.remove('show');
+        container.classList.add('hide');
         cancelShow = true;
     }
 
-- 
cgit 1.3.0-6-gf8a5