用个简单的动画提示用户这不是系统右键菜单

scss/components/_context-menu.scss

@@ -1,3 +1,18 @@
+// 为了提示用户这不是系统菜单。
+@keyframes contextMenuInSpecial {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05);
+  }
+
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
 @keyframes contextMenuIn {
   from {
     opacity: 0;
@@ -24,7 +39,8 @@
     }
 
     &.in {
-      animation-name: contextMenuIn;
+      animation-name: contextMenuInSpecial;
+      animation-duration: 0.5s;
     }
 
     &.out {

src/components/ContextMenu.tsx

@@ -73,13 +73,13 @@ export class ContextMenu extends React.Component<
   }
 
   componentDidMount() {
-    document.body.addEventListener('click', this.handleOutClick, true);
+    // document.body.addEventListener('click', this.handleOutClick, true);
     document.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentWillUnmount() {
     ContextMenu.instance = null;
-    document.body.removeEventListener('click', this.handleOutClick, true);
+    // document.body.removeEventListener('click', this.handleOutClick, true);
     document.removeEventListener('keydown', this.handleKeyDown);
   }
 
@@ -103,20 +103,20 @@ export class ContextMenu extends React.Component<
     });
   }
 
-  @autobind
-  handleOutClick(e: Event) {
-    if (
-      !e.target ||
-      !this.menuRef.current ||
-      this.menuRef.current.contains(e.target as HTMLElement)
-    ) {
-      return;
-    }
-    if (this.state.isOpened) {
-      e.preventDefault();
-      this.close();
-    }
-  }
+  // @autobind
+  // handleOutClick(e: Event) {
+  //   if (
+  //     !e.target ||
+  //     !this.menuRef.current ||
+  //     this.menuRef.current.contains(e.target as HTMLElement)
+  //   ) {
+  //     return;
+  //   }
+  //   if (this.state.isOpened) {
+  //     e.preventDefault();
+  //     this.close();
+  //   }
+  // }
 
   handleClick(item: MenuItem) {
     item.disabled ||