Sidebar animation leave fixed #3474

pull/3518/head^2
Bahadır Sofuoğlu 2023-01-10 10:10:07 +03:00
parent d8578480db
commit 17a0faabfa
1 changed files with 18 additions and 18 deletions

View File

@ -1,8 +1,8 @@
<template>
<Portal>
<div v-if="maskVisible" ref="mask" style="maskStyle" :class="maskClasses" @mousedown="onMaskClick">
<div ref="mask" style="maskStyle" :class="maskClasses" @mousedown="onMaskClick">
<transition name="p-sidebar" @after-enter="onAfterEnter" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
<div :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
<div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
<div :ref="headerContainerRef" class="p-sidebar-header">
<div v-if="$slots.header" class="p-sidebar-header-content">
<slot name="header"></slot>
@ -78,11 +78,10 @@ export default {
};
},
watch: {
visible(val) {
this.maskVisible = val;
visible(newValue) {
this.maskVisible = newValue ? newValue : this.maskVisible;
}
},
beforeUnmount() {
if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container);
@ -118,6 +117,8 @@ export default {
if (this.autoZIndex) {
ZIndexUtils.clear(this.mask);
}
this.maskVisible = false;
},
onAfterEnter() {
this.bindOutsideClickListener();
@ -196,7 +197,6 @@ export default {
containerClass() {
return [
'p-sidebar p-component',
this.getPositionClass(),
{
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false,