From 1d279b920d4e28042de0d799ffd136bfc57dee06 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 9 Dec 2019 10:44:51 +0300
Subject: [PATCH] Unified slide animation for toggleable content

---
 src/components/accordion/Accordion.vue    | 24 ++---------------------
 src/components/common/Common.css          | 21 ++++++++++++++++++++
 src/components/panel/Panel.vue            | 24 ++---------------------
 src/components/panelmenu/PanelMenu.vue    | 24 ++---------------------
 src/components/panelmenu/PanelMenuSub.vue |  4 ++--
 5 files changed, 29 insertions(+), 68 deletions(-)

diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index 5bc8bb2d0..5e86c5ac7 100644
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -9,8 +9,8 @@
                     <AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
                 </a>
             </div>
-            <transition name="p-accordion-content-wrapper">
-                <div class="p-accordion-content-wrapper" v-show="tab.d_active">
+            <transition name="p-toggleable-content">
+                <div class="p-toggleable-content" v-show="tab.d_active">
                     <div class="p-accordion-content">
                         <AccordionTabSlot :tab="tab" type="default" v-if="tab.$scopedSlots.default" />
                     </div>
@@ -124,24 +124,4 @@ export default {
 .p-accordion .p-accordion-header.p-disabled a {
     cursor: default;
 }
-
-.p-accordion-content-wrapper-enter,
-.p-accordion-content-wrapper-leave-to {
-    max-height: 0;
-}
-
-.p-accordion-content-wrapper-enter-to,
-.p-accordion-content-wrapper-leave {
-    max-height: 1000px;
-}
-
-.p-accordion-content-wrapper-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-accordion-content-wrapper-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index 838af60de..6ec8e0ec3 100644
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -130,4 +130,25 @@ button {
 .p-input-overlay-leave-active {
     -webkit-transition: transform .3s, opacity .15s;
     transition: transform .3s, opacity .15s;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
 }
\ No newline at end of file
diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
index 7ecba0750..def59c93c 100644
--- a/src/components/panel/Panel.vue
+++ b/src/components/panel/Panel.vue
@@ -8,8 +8,8 @@
                 <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
             </a>
         </div>
-        <transition name="p-panel-content-wrapper">
-            <div class="p-panel-content-wrapper" v-show="!d_collapsed">
+        <transition name="p-toggleable-content">
+            <div class="p-toggleable-content" v-show="!d_collapsed">
                 <div class="p-panel-content">
                     <slot></slot>
                 </div>
@@ -86,24 +86,4 @@ export default {
 	padding: .25em .5em;
 	text-align:left;
 }
-
-.p-panel-content-wrapper-enter,
-.p-panel-content-wrapper-leave-to {
-    max-height: 0;
-}
-
-.p-panel-content-wrapper-enter-to,
-.p-panel-content-wrapper-leave {
-    max-height: 1000px;
-}
-
-.p-panel-content-wrapper-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-panel-content-wrapper-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
 </style>
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 6c9cf73ee..9ae444eb3 100644
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -9,8 +9,8 @@
                         <span class="p-menuitem-text">{{item.label}}</span>
                     </a>
                 </div>
-                <transition name="p-panelmenu-content-wrapper">
-                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                <transition name="p-toggleable-content">
+                    <div class="p-toggleable-content" v-show="item === activeItem">
                         <div class="p-panelmenu-content" v-if="item.items">
                             <PanelMenuSub :model="item.items" class="p-panelmenu-root-submenu" />
                         </div>
@@ -145,24 +145,4 @@ export default {
     display: block;
     text-decoration: none;
 }
-
-.p-panelmenu-content-wrapper-enter,
-.p-panelmenu-content-wrapper-leave-to {
-    max-height: 0;
-}
-
-.p-panelmenu-content-wrapper-enter-to,
-.p-panelmenu-content-wrapper-leave {
-    max-height: 1000px;
-}
-
-.p-panelmenu-content-wrapper-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-panelmenu-content-wrapper-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
 </style>
diff --git a/src/components/panelmenu/PanelMenuSub.vue b/src/components/panelmenu/PanelMenuSub.vue
index 1421c0aa9..10f2004a5 100644
--- a/src/components/panelmenu/PanelMenuSub.vue
+++ b/src/components/panelmenu/PanelMenuSub.vue
@@ -11,8 +11,8 @@
                     <span :class="['p-menuitem-icon', item.icon]"></span>
                     <span class="p-menuitem-text">{{item.label}}</span>
                 </a>
-                <transition name="p-panelmenu-content-wrapper">
-                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                <transition name="p-toggleable-content">
+                    <div class="p-toggleable-content" v-show="item === activeItem">
                         <sub-panelmenu :model="item.items" v-if="item.visible !== false && item.items" :key="item.label + '_sub_'" />
                     </div>
                 </transition>