vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/sidebar/Sidebar.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<Portal> <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> <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 :ref="headerContainerRef" class="p-sidebar-header">
<div v-if="$slots.header" class="p-sidebar-header-content"> <div v-if="$slots.header" class="p-sidebar-header-content">
<slot name="header"></slot> <slot name="header"></slot>
@ -78,11 +78,10 @@ export default {
}; };
}, },
watch: { watch: {
visible(val) { visible(newValue) {
this.maskVisible = val; this.maskVisible = newValue ? newValue : this.maskVisible;
} }
}, },
beforeUnmount() { beforeUnmount() {
if (this.container && this.autoZIndex) { if (this.container && this.autoZIndex) {
ZIndexUtils.clear(this.container); ZIndexUtils.clear(this.container);
@ -118,6 +117,8 @@ export default {
if (this.autoZIndex) { if (this.autoZIndex) {
ZIndexUtils.clear(this.mask); ZIndexUtils.clear(this.mask);
} }
this.maskVisible = false;
}, },
onAfterEnter() { onAfterEnter() {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
@ -196,7 +197,6 @@ export default {
containerClass() { containerClass() {
return [ return [
'p-sidebar p-component', 'p-sidebar p-component',
this.getPositionClass(),
{ {
'p-input-filled': this.$primevue.config.inputStyle === 'filled', 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false, 'p-ripple-disabled': this.$primevue.config.ripple === false,
@ -297,28 +297,28 @@ export default {
/* Animation */ /* Animation */
/* Center */ /* Center */
.p-sidebar-left.p-sidebar-enter-from, .p-sidebar-left .p-sidebar-enter-from,
.p-sidebar-left.p-sidebar-leave-to { .p-sidebar-left .p-sidebar-leave-to {
transform: translateX(-100%); transform: translateX(-100%);
} }
.p-sidebar-right.p-sidebar-enter-from, .p-sidebar-right .p-sidebar-enter-from,
.p-sidebar-right.p-sidebar-leave-to { .p-sidebar-right .p-sidebar-leave-to {
transform: translateX(100%); transform: translateX(100%);
} }
.p-sidebar-top.p-sidebar-enter-from, .p-sidebar-top .p-sidebar-enter-from,
.p-sidebar-top.p-sidebar-leave-to { .p-sidebar-top .p-sidebar-leave-to {
transform: translateY(-100%); transform: translateY(-100%);
} }
.p-sidebar-bottom.p-sidebar-enter-from, .p-sidebar-bottom .p-sidebar-enter-from,
.p-sidebar-bottom.p-sidebar-leave-to { .p-sidebar-bottom .p-sidebar-leave-to {
transform: translateY(100%); transform: translateY(100%);
} }
.p-sidebar-full.p-sidebar-enter-from, .p-sidebar-full .p-sidebar-enter-from,
.p-sidebar-full.p-sidebar-leave-to { .p-sidebar-full .p-sidebar-leave-to {
opacity: 0; opacity: 0;
} }
.p-sidebar-full.p-sidebar-enter-active, .p-sidebar-full .p-sidebar-enter-active,
.p-sidebar-full.p-sidebar-leave-active { .p-sidebar-full .p-sidebar-leave-active {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
} }