test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 20:27:44 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix (menu) component animation bug (#1690)

Browse Source 
* fix: menu component animation bug

* fix: menu component animation bug
This commit is contained in:
Summer 2021-03-27 19:19:10 +08:00 committed by GitHub
parent 8b7db50681
commit 3ac7c2c75f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/menu/src/menu-collapse-transition.vue
View File

@ -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) {

88
packages/menu/src/submenu.vue
View File

@ -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 }],