From 090a471744e0f588598cd4d3a47d7f201c26ab4e Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 4 Apr 2021 14:31:14 -0300 Subject: info card animations --- static/client.js | 12 ++++++++++-- static/site.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 63 insertions(+), 4 deletions(-) (limited to 'static') 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 { -- cgit 1.3.0-6-gf8a5