scale-in animation for column action menu, closes #1039

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);
+    }
+}

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;