From bf82b3d6a605c9ddadd5fb739249dfe6defaf635 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Wed, 21 Oct 2020 10:02:26 -0700
Subject: [PATCH] scale-in animation for column action menu, closes #1039

---
 datasette/static/app.css  | 17 +++++++++++++++++
 datasette/static/table.js |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index d2494a34..73a8c9b5 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -453,3 +453,20 @@ svg.dropdown-menu-icon {
     position: relative;
     top: 1px;
 }
+
+.anim-scale-in {
+    animation-name: scale-in;
+    animation-duration: 0.15s;
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.6);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
diff --git a/datasette/static/table.js b/datasette/static/table.js
index 08c560d6..c41fd9b0 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -61,6 +61,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
         }
         if (!target) {
             menu.style.display = 'none';
+            menu.classList.remove('anim-scale-in');
         }
     });
     function iconClicked(ev) {
@@ -130,6 +131,7 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
         menu.style.top = (menuTop + 6) + 'px';
         menu.style.left = menuLeft + 'px';
         menu.style.display = 'block';
+        menu.classList.add('anim-scale-in');
     }
     var svg = document.createElement('div');
     svg.innerHTML = DROPDOWN_ICON_SVG;