From d411c4c8b40742fbad19513aadd49c679e20ca46 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 2 Aug 2023 15:02:43 +0300
Subject: [PATCH] Refactor #4231 - For Sidebar

---
 components/lib/sidebar/Sidebar.d.ts | 4 ++++
 components/lib/sidebar/Sidebar.vue  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 2d3ce53cb..fa28b8341 100755
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -60,6 +60,10 @@ export interface SidebarPassThroughOptions {
      * @see {@link BaseComponent.ComponentHooks}
      */
     hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: any;
 }
 
 /**
diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index a9c5f800d..716540a4d 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal>
         <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
-            <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
+            <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
                     <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
                         <div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">