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 { .px-scalein {
animation: scalein 150ms linear; animation: px-scalein 150ms linear;
} }
.px-fadein { .px-fadein {
animation: fadein 150ms linear; animation: px-fadein 150ms linear;
} }
.px-fadeout { .px-fadeout {
animation: fadeout 150ms linear; animation: px-fadeout 150ms linear;
} }
.px-slidedown { .px-slidedown {
animation: slidedown 0.45s ease-in-out; animation: px-slidedown 0.45s ease-in-out;
} }
.px-slideup { .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 { > div {
overflow: hidden;
ol { ol {
margin: 0 0 0 1rem; margin: 0 0 0 1rem;
padding: .25rem 0; padding: .25rem 0;

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

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

6
layouts/AppMenuItem.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`"> <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"> <span class="menu-icon">
<i :class="menuitem.icon"></i> <i :class="menuitem.icon"></i>
</span> </span>
@ -13,7 +13,7 @@
<i :class="menuitem.icon"></i> <i :class="menuitem.icon"></i>
</span> </span>
<span>{{ menuitem.name }}</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> </a>
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }"> <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"> <span v-if="menuitem.icon && root" class="menu-icon">
@ -24,7 +24,7 @@
</PrimeVueNuxtLink> </PrimeVueNuxtLink>
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span> <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> <ol>
<AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem> <AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
</ol> </ol>

2
tailwind.config.js
View File

@ -3,6 +3,6 @@ const primeui = require('./tailwindcss-primeui');
module.exports = { module.exports = {
darkMode: 'class', 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] plugins: [primeui]
}; };