StyleClass 以声明方式管理 CSS 类，以便在进入/离开动画期间或仅在元素上切换类。
import StyleClass from 'primevue/styleclass';
app.directive('styleclass', StyleClass);
StyleClass 有两种模式，toggleClass 仅添加/删除类和进入/离开动画。
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText />
使用 enterFromClass、enterActiveClass、enterToClass、leaveFromClass、leaveActiveClass、leaveToClass 属性指定在进入和离开动画期间要应用的类。此外，如果目标是覆盖层，则 hideOnOutsideClick 将非常有用，如果单击弹出窗口外部，它将隐藏目标。
第一个示例使用自定义淡入动画，第二个示例使用来自 tailwind-primeui 插件的 animate-slide。
<div class="card flex items-center justify-center gap-8">
<div class="flex flex-col items-center">
<div>
<Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
<Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
</div>
<div class="h-32">
<div class="my-hidden animate-duration-500 box1">
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
</div>
</div>
</div>
<div class="flex flex-col items-center">
<div>
<Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
<Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
</div>
<div class="h-32">
<div class="hidden animate-duration-500 box2 overflow-hidden">
<div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
</div>
</div>
</div>
</div>