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

Unified slide animation for toggleable content

pull/132/head
cagataycivici 2019-12-09 10:44:51 +03:00
parent 3afa9bbe9a
commit 1d279b920d
5 changed files with 29 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/accordion/Accordion.vue
View File

@ -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>

21
src/components/common/Common.css
View File

@ -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;
}

24
src/components/panel/Panel.vue
View File

@ -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>

24
src/components/panelmenu/PanelMenu.vue
View File

@ -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>

4
src/components/panelmenu/PanelMenuSub.vue
View File

@ -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>