Added animation to context menus

resources/cider-ui/index.js

@@ -22,16 +22,24 @@ var CiderContextMenu = {
         var menuBackground = document.createElement("div");
         var menu = document.createElement("div");
         menu.classList.add("context-menu-body");
+        menu.classList.add("context-menu-open");
         menuBackground.classList.add("context-menu");
         menu.style.left = 0 + "px";
         menu.style.top = 0 + "px";
         menu.style.position = "absolute";
         menu.style.zIndex = "99909";
+        menu.addEventListener("animationend", function () {
+            menu.classList.remove("context-menu-open");
+        }, {once: true});
 
         // when menubackground is clicked, remove it
         menuBackground.addEventListener("click", function () {
-            menuBackground.remove();
-            menu.remove();
+            menuBackground.style.pointerEvents = "none";
+            menu.classList.add("context-menu-close");
+            menu.addEventListener("animationend", function () {
+                menuBackground.remove();
+                menu.remove();
+            }, {once: true});
         });
 
         // add menu to menuBackground

resources/cider-ui/style.less

@@ -461,9 +461,42 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     padding: 6px;
     border-radius: 6px;
     box-shadow: var(--mediaItemShadow-Shadow);
+    &.context-menu-open {
+      animation-duration: .10s;
+      animation-name: contextMenuIn;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
+    &.context-menu-close {
+      animation-duration: .10s;
+      animation-name: contextMenuOut;
+      animation-iteration-count: 1;
+      animation-easings: var(--appleEase);
+    }
   }
 }
 
+@keyframes contextMenuIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes contextMenuOut {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}
 
 .app-sidebar-content::-webkit-scrollbar {
   display: none;