Add transition for auxiliary toolbar menu #480

dist/css/style.css

@@ -16,4 +16,28 @@ input[type=range]{height:4px;-webkit-appearance:none;width:250px}input[type=rang
 .clearPop{
     position: absolute;
     cursor: pointer;
+}
+
+#aux-toolbar,
+#aux-toolbar.nav-wrapper {
+    display: none; 
+    overflow: hidden;
+    transform-origin: top center;
+    transform: scaleY(0);
+    opacity: 0;
+    transition: transform 400ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease;
+    will-change: transform, opacity;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+#aux-toolbar.open,
+#aux-toolbar.nav-wrapper.open {
+    display: block !important; 
+    transform: scaleY(1);
+    opacity: 1;
+}
+
+#aux-toolbar > .nav-wrapper {
+    transform-origin: top center;
 }

js/toolbar.js

@@ -688,27 +688,42 @@ class Toolbar {
      * @returns {void}
      */
     renderMenuIcon(onclick) {
-        const menuIcon = docById("menu");
-        const auxToolbar = docById("aux-toolbar");
-        menuIcon.onclick = () => {
-            var searchBar = docById("search");
-            searchBar.classList.toggle("open");
-            if (auxToolbar.style.display == "" || auxToolbar.style.display == "none") {
-                onclick(this.activity, false);
-                auxToolbar.style.display = "block";
-                menuIcon.innerHTML = "more_vert";
-                docById("toggleAuxBtn").className = "blue darken-1";
-            } else {
-                onclick(this.activity, true);
+    const menuIcon = docById("menu");
+    const auxToolbar = docById("aux-toolbar");
+    if (!auxToolbar._animInitialized) {
+        auxToolbar.addEventListener("transitionend", (e) => {
+            if (!auxToolbar.classList.contains("open")) {
                 auxToolbar.style.display = "none";
-                menuIcon.innerHTML = "menu";
-                docById("toggleAuxBtn").className -= "blue darken-1";
-                docById("chooseKeyDiv").style.display = "none";
-                docById("movable").style.display = "none";
             }
-        };
+        });
+        auxToolbar._animInitialized = true;
     }
 
+    menuIcon.onclick = () => {
+        var searchBar = docById("search");
+        searchBar.classList.toggle("open");
+        const isOpening = !auxToolbar.classList.contains("open");
+
+        if (isOpening) {
+            auxToolbar.style.display = "block";
+            auxToolbar.offsetHeight;
+            auxToolbar.classList.add("open");
+        } else {
+           auxToolbar.classList.remove("open");
+        }
+        onclick(this.activity, !isOpening);
+        menuIcon.innerHTML = isOpening ? "more_vert" : "menu";
+        const toggleBtn = docById("toggleAuxBtn");
+        if (isOpening) {
+            toggleBtn.classList.add("blue", "darken-1");
+        } else {
+            toggleBtn.classList.remove("blue", "darken-1");
+            docById("chooseKeyDiv").style.display = "none";
+            docById("movable").style.display = "none";
+        }
+    };
+}
+
     /**
      * @public
      * @param {Function} onclick
@@ -1017,12 +1032,14 @@ class Toolbar {
      */
     closeAuxToolbar = (onclick) => {
         const auxToolbar = docById("aux-toolbar");
-        if (auxToolbar.style.display === "block") {
+        const isVisible = auxToolbar.style.display === "block" || auxToolbar.classList.contains("open");
+        if (isVisible) {
             onclick(this.activity, false);
             const menuIcon = docById("menu");
-            auxToolbar.style.display = "none";
+            auxToolbar.classList.remove("open");
             menuIcon.innerHTML = "menu";
-            docById("toggleAuxBtn").className -= "blue darken-1";
+            const toggleBtn = docById("toggleAuxBtn");
+            if (toggleBtn) toggleBtn.classList.remove("blue", "darken-1");
         }
     };
 }