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>