Unified slide animation for toggleable content

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">
+            <transition name="p-toggleable-content">
-                <div class="p-accordion-content-wrapper" v-show="tab.d_active">
+                <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>

src/components/common/Common.css

@@ -131,3 +131,24 @@ button {
     -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;
+}

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">
+        <transition name="p-toggleable-content">
-            <div class="p-panel-content-wrapper" v-show="!d_collapsed">
+            <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>

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">
+                <transition name="p-toggleable-content">
-                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                    <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>

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">
+                <transition name="p-toggleable-content">
-                    <div class="p-panelmenu-content-wrapper" v-show="item === activeItem">
+                    <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>