StyleClassは、enter/leaveアニメーション中や、単に要素のクラスを切り替えるために、CSSクラスを宣言的に管理します。
import StyleClass from 'primevue/styleclass';
app.directive('styleclass', StyleClass);
StyleClassには2つのモードがあります。クラスを追加/削除するだけのtoggleClassモードと、enter/leaveアニメーションです。
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText />
enter/leaveアニメーション中に適用するクラスは、enterFromClass、enterActiveClass、enterToClass、leaveFromClass、leaveActiveClass、leaveToClassプロパティを使用して指定します。さらに、ターゲットがオーバーレイの場合、ポップアップの外側がクリックされたときにターゲットを非表示にするのにhideOnOutsideClickが役立ちます。
最初の例ではカスタムフェードアニメーションを使用し、2番目の例ではtailwind-primeuiプラグインのアニメートスライドを使用します。
<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>