fix menu fade animations

docs/src/demos/Examples/Menus/React/index.jsx

@@ -25,7 +25,7 @@ export default () => {
 
   return (
     <div style={{ position: 'relative' }}>
-      {editor && <BubbleMenu className="bubble-menu" editor={editor}>
+      {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleBold().run()}
           className={editor.isActive('bold') ? 'is-active' : ''}
@@ -46,7 +46,7 @@ export default () => {
         </button>
       </BubbleMenu>}
 
-      {editor && <FloatingMenu className="floating-menu" editor={editor}>
+      {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} editor={editor}>
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}

docs/src/demos/Examples/Menus/React/styles.scss

@@ -14,7 +14,6 @@
   background-color: #0D0D0D;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
@@ -37,9 +36,6 @@
   background-color: #0D0D0D10;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;

docs/src/demos/Examples/Menus/Vue/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="position: relative">
-    <bubble-menu class="bubble-menu" :editor="editor" v-if="editor">
+    <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         Bold
       </button>
@@ -12,7 +12,7 @@
       </button>
     </bubble-menu>
 
-    <floating-menu class="floating-menu" :editor="editor" v-if="editor">
+    <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor" v-if="editor">
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         H1
       </button>
@@ -95,7 +95,6 @@ export default {
   background-color: #0D0D0D;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;
@@ -118,9 +117,6 @@ export default {
   background-color: #0D0D0D10;
   padding: 0.2rem;
   border-radius: 0.5rem;
-  margin-top: -0.25rem;
-  margin-left: 0.25rem;
-  transition: visibility 0.1s ease, opacity 0.1s ease;
 
   button {
     border: none;

packages/core/src/style.ts

@@ -57,6 +57,10 @@ const style = `.ProseMirror {
 
 .ProseMirror-focused .ProseMirror-gapcursor {
   display: block;
+}
+
+.tippy-box[data-animation=fade][data-state=hidden] {
+  opacity: 0
 }`
 
 export default style