StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
import StyleClass from 'primevue/styleclass';
app.directive('styleclass', StyleClass);
StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations.
<Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
<InputText />
Classes to apply during enter and leave animations are specified using the enterClass, enterActiveClass, enterToClass, leaveClass, leaveActiveClass,leaveToClassproperties. In addition in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked.
<Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
<div class="hidden animation-duration-500 box">
<div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
</div>