AnimateOnScroll 用于在滚动过程中元素进入或离开视窗时对其应用动画。
import AnimateOnScroll from 'primevue/animateonscroll';
app.directive('animateonscroll', AnimateOnScroll);
动画类使用 enterClass 和 leaveClass 属性定义。此示例使用 PrimeFlex 动画，但支持任何有效的 CSS 动画。
<div v-animateonscroll="{ enterClass: 'animate-fadein', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-fadeinleft', leaveClass: 'animate-fadeoutleft' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-fadeinright', leaveClass: 'animate-fadeoutright' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">fade-right</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-zoomin', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000">
<span class="text-3xl font-bold">zoom</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-flipleft', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-left</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-flipup', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">flip-y</span>
</div>
<div v-animateonscroll="{ enterClass: 'animate-scalein', leaveClass: 'animate-fadeout' }" class="flex bg-primary text-primary-contrast shadow-lg justify-center items-center h-40 w-40 sm:h-60 sm:w-60 rounded-2xl animate-duration-1000 animate-ease-in-out">
<span class="text-3xl font-bold">scalein</span>
</div>
AnimateOnScroll 不需要任何角色和属性。
组件不包含任何交互式元素。