From 3ac7c2c75fe0fcf382fee84f84bb0690452fe0d2 Mon Sep 17 00:00:00 2001
From: Summer <SorrowX@users.noreply.github.com>
Date: Sat, 27 Mar 2021 19:19:10 +0800
Subject: [PATCH] fix (menu) component animation bug (#1690)

* fix: menu component animation bug

* fix: menu component animation bug
---
 .../menu/src/menu-collapse-transition.vue     |  3 +-
 packages/menu/src/submenu.vue                 | 88 ++++++++-----------
 2 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/packages/menu/src/menu-collapse-transition.vue b/packages/menu/src/menu-collapse-transition.vue
index c6fd805ddf..4518d0a403 100644
--- a/packages/menu/src/menu-collapse-transition.vue
+++ b/packages/menu/src/menu-collapse-transition.vue
@@ -16,9 +16,10 @@ export default defineComponent({
           el.style.opacity = 0.2
         },
 
-        enter(el) {
+        enter(el, done) {
           addClass(el, 'el-opacity-transition')
           el.style.opacity = 1
+          done()
         },
 
         afterEnter(el) {
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 48ba88e46c..6dd1d12d5d 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -25,29 +25,28 @@
       :popper-class="props.popperClass"
       :placement="data.currentPlacement"
       :append-to-body="appendToBody"
+      transition: this.menuTransitionName,
+      gpuAcceleration: false,
     >
       <template #default>
-        <transition :name="menuTransitionName">
-          <div
-            v-show="opened"
-            ref="menu"
-            :class="[`el-menu--${mode}`, props.popperClass]"
-            @mouseenter="$event => handleMouseenter($event, 100)"
-            @mouseleave="() => handleMouseleave(true)"
-            @focus="$event => handleMouseenter($event, 100)"
+        <div
+          ref="menu"
+          :class="[`el-menu--${mode}`, props.popperClass]"
+          @mouseenter="$event => handleMouseenter($event, 100)"
+          @mouseleave="() => handleMouseleave(true)"
+          @focus="$event => handleMouseenter($event, 100)"
+        >
+          <ul
+            role="menu"
+            :class="[
+              'el-menu el-menu--popup',
+              `el-menu--popup-${data.currentPlacement}`,
+            ]"
+            :style="{ backgroundColor: rootProps.backgroundColor || '' }"
           >
-            <ul
-              role="menu"
-              :class="[
-                'el-menu el-menu--popup',
-                `el-menu--popup-${data.currentPlacement}`,
-              ]"
-              :style="{ backgroundColor: rootProps.backgroundColor || '' }"
-            >
-              <slot name="default"></slot>
-            </ul>
-          </div>
-        </transition>
+            <slot name="default"></slot>
+          </ul>
+        </div>
       </template>
       <template #trigger>
         <div
@@ -102,7 +101,6 @@ import {
   onBeforeUnmount,
   withDirectives,
   Fragment,
-  Transition,
   vShow,
   h,
 } from 'vue'
@@ -459,35 +457,27 @@ export default defineComponent({
         popperClass: this.popperClass,
         placement: this.data.currentPlacement,
         appendToBody: this.appendToBody,
+        transition: this.menuTransitionName,
+        gpuAcceleration: false,
       }, {
-        default: () => h(
-          Transition,
-          {
-            name: this.menuTransitionName,
-          },
-          {
-            default: () => withDirectives(
-              h('div', {
-                ref: 'menu',
-                class: [
-                  `el-menu--${this.mode}`,
-                  this.popperClass,
-                ],
-                onMouseenter: ($event: Event) => this.handleMouseenter($event, 100),
-                onMouseleave: () => this.handleMouseleave(true),
-                onFocus: ($event: Event) => this.handleMouseenter($event, 100),
-              }, [
-                h('ul', {
-                  class: [
-                    'el-menu el-menu--popup',
-                    `el-menu--popup-${this.data.currentPlacement}`,
-                  ],
-                  style: ulStyle,
-                }, [this.$slots.default?.()]),
-              ]),
-              [[vShow, this.opened]]),
-          },
-        ),
+        default: () => h('div', {
+          ref: 'menu',
+          class: [
+            `el-menu--${this.mode}`,
+            this.popperClass,
+          ],
+          onMouseenter: ($event: Event) => this.handleMouseenter($event, 100),
+          onMouseleave: () => this.handleMouseleave(true),
+          onFocus: ($event: Event) => this.handleMouseenter($event, 100),
+        }, [
+          h('ul', {
+            class: [
+              'el-menu el-menu--popup',
+              `el-menu--popup-${this.data.currentPlacement}`,
+            ],
+            style: ulStyle,
+          }, [this.$slots.default?.()]),
+        ]),
         trigger: () => h('div', {
           class: 'el-submenu__title',
           style: [this.paddingStyle, this.titleStyle, { backgroundColor: this.backgroundColor }],