info card animations

2 files changed, 63 insertions, 4 deletions

diff --git a/static/client.js b/static/client.js
index b7aa27b0..aae09193 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;
     }
 
diff --git a/static/site.css b/static/site.css
index c62b4f68..e13ec106 100644
--- a/static/site.css
+++ b/static/site.css
@@ -703,15 +703,54 @@ li > ul {
 
 #info-card-container {
     position: absolute;
-    display: none;
 
     margin-right: 10px;
+    padding-left: 3ch;
+    border-top: 1px solid white;
+
+    pointer-events: none; /* Padding area shouldn't 8e interactive. */
+    display: none;
 }
 
-#info-card-container.shown {
+#info-card-container.show,
+#info-card-container.hide {
     display: block;
 }
 
+#info-card-container.show {
+    animation: 0.2s linear forwards info-card-show;
+    transition: top 0.1s, left 0.1s;
+}
+
+#info-card-container.hide {
+    animation: 0.2s linear forwards info-card-hide;
+}
+
+@keyframes info-card-show {
+    0% {
+        opacity: 0;
+        margin-top: -5px;
+    }
+
+    100% {
+        opacity: 1;
+        margin-top: 0;
+    }
+}
+
+@keyframes info-card-hide {
+    0% {
+        opacity: 1;
+        margin-top: 0;
+    }
+
+    100% {
+        opacity: 0;
+        margin-top: 5px;
+        display: none;
+    }
+}
+
 .info-card {
     background-color: rgba(0, 0, 0, 0.8);
     border: 1px dotted var(--primary-color);
@@ -720,6 +759,18 @@ li > ul {
 
     padding: 5px;
     font-size: 0.9em;
+
+    pointer-events: none;
+}
+
+#info-card-container.show .info-card {
+    animation: 0.01s linear 0.2s forwards info-card-become-interactive;
+}
+
+@keyframes info-card-become-interactive {
+    to {
+        pointer-events: auto;
+    }
 }
 
 .info-card-name {