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

Fixed animations

pull/5806/head
Cagatay Civici 2024-05-20 14:17:48 +03:00
parent 43ec5d319b
commit 8c06ffecec
5 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/styles/layout/_animation.scss
View File

@ -51,22 +51,22 @@
}
.px-scalein {
animation: scalein 150ms linear;
animation: px-scalein 150ms linear;
}
.px-fadein {
animation: fadein 150ms linear;
animation: px-fadein 150ms linear;
}
.px-fadeout {
animation: fadeout 150ms linear;
animation: px-fadeout 150ms linear;
}
.px-slidedown {
animation: slidedown 0.45s ease-in-out;
animation: px-slidedown 0.45s ease-in-out;
}
.px-slideup {
animation: slideup 0.45s cubic-bezier(0, 1, 0, 1);
animation: px-slideup 0.45s cubic-bezier(0, 1, 0, 1);
}

2
assets/styles/layout/_sidebar.scss
View File

@ -104,6 +104,8 @@
}
> div {
overflow: hidden;
ol {
margin: 0 0 0 1rem;
padding: .25rem 0;

4
components/lib/styleclass/StyleClass.js
View File

@ -41,7 +41,7 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
if (!target.$_pstyleclass_animating) {
target.$_pstyleclass_animating = true;
if (binding.value.enterActiveClass === 'slidedown') {
if (binding.value.enterActiveClass.includes('slidedown')) {
target.style.height = '0px';
DomHandler.removeClass(target, 'hidden');
target.style.maxHeight = target.scrollHeight + 'px';
@ -69,7 +69,7 @@ const StyleClass = BaseStyleClass.extend('styleclass', {
target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
if (binding.value.enterActiveClass === 'slidedown') {
if (binding.value.enterActiveClass.includes('slidedown')) {
target.style.maxHeight = '';
}

6
layouts/AppMenuItem.vue
View File

@ -1,6 +1,6 @@
<template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'slidedown', leaveToClass: 'hidden', leaveActiveClass: 'slideup' }" type="button">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'px-slidedown', leaveToClass: 'hidden', leaveActiveClass: 'px-slideup' }" type="button">
<span class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
@ -13,7 +13,7 @@
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Tag v-if="menuitem.badge" :value="menuitem.badge" class="ml-auto"></Tag>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</a>
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
<span v-if="menuitem.icon && root" class="menu-icon">
@ -24,7 +24,7 @@
</PrimeVueNuxtLink>
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
<div v-if="menuitem.children" class="overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
<div v-if="menuitem.children" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
<ol>
<AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
</ol>

2
tailwind.config.js
View File

@ -3,6 +3,6 @@ const primeui = require('./tailwindcss-primeui');
module.exports = {
darkMode: 'class',
content: ['./pages/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/doc/**/*.{js,vue,ts}', './components/landing/**/*.{js,vue,ts}', './components/template/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
plugins: [primeui]
};