element [Bug Report] Use drawer in a router-view result in broken the animation

91zkwejq 于 4个月前发布在其他

关注(0)|答案(2)|浏览(87)

Element UI version

2.13.1

OS/Browsers version

Chrome Version 83.0.4103.97 (Official Build) (64-bit)

Vue version

2.6.11

Reproduction Link

https://jsfiddle.net/op458tjq/29/

Steps to reproduce

click go to bar then close the drawer repeatedly
watch the animation.
sometimes after the button was just clicked, the draw showed first, animate then.

it's because el-drawer use to implement animation. but view router will cause el-drawer to unmount and mount during an expected animation, this results in a confliction.

I write a component using plain CSS to replace el-drawer but cause a new bug that hard to maintain the z-index between my component and Element UI components.
I think we need a better implementation.

What is Expected?

smoothly animation.

What is actually happening?

the animation was broken by vue-router

Element

来源：https://github.com/ElemeFE/element/issues/19682

2条答案

按热度按时间

pcww981p1#

I have encountered this problem

赞(0）回复(0）举报 4个月前

wgxvkvu92#

Hi, I had the same problem. So I create a data variable 'show: false', then on mounted method I set true. Works fine for me
const Bar = { data: function () { return { show: false } }, mounted() { this.show = true; }, template: '<el-drawer @close="$router.back()" :visible="show">foo</el-drawer>' }
https://jsfiddle.net/edqc8s9f/2/