primevue-mirror/doc/animateonscroll/BasicDoc.vue

244 lines
13 KiB
Vue
Raw Normal View History

<template>
<DocSectionText v-bind="$attrs">
2023-10-26 17:53:11 +00:00
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.</p>
</DocSectionText>
2024-05-20 12:14:38 +00:00
<div class="card flex flex-col items-center overflow-hidden">
<div class="flex flex-col items-center gap-2">
2023-10-25 04:01:16 +00:00
<span class="text-xl font-medium">Scroll Down</span>
2024-05-20 12:14:38 +00:00
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
2023-10-25 04:01:16 +00:00
<i class="pi pi-arrow-down" />
</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-25 04:01:16 +00:00
<span class="text-3xl font-bold">fade-in</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:13:31 +00:00
<div
v-animateonscroll="{ enterClass: 'animate-fadeinleft', leaveClass: 'animate-fadeoutleft' }"
2024-05-30 00:15:14 +00:00
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"
2024-05-30 00:13:31 +00:00
>
2023-10-25 04:01:16 +00:00
<span class="text-3xl font-bold">fade-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:13:31 +00:00
<div
v-animateonscroll="{ enterClass: 'animate-fadeinright', leaveClass: 'animate-fadeoutright' }"
2024-05-30 00:15:14 +00:00
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"
2024-05-30 00:13:31 +00:00
>
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-right</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">zoom</span>
2023-10-26 06:09:43 +00:00
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:13:31 +00:00
<div
v-animateonscroll="{ enterClass: 'animate-flipleft', leaveClass: 'animate-fadeout' }"
2024-05-30 00:15:14 +00:00
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"
2024-05-30 00:13:31 +00:00
>
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:13:31 +00:00
<div
v-animateonscroll="{ enterClass: 'animate-flipup', leaveClass: 'animate-fadeout' }"
2024-05-30 00:15:14 +00:00
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"
2024-05-30 00:13:31 +00:00
>
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-y</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:13:31 +00:00
<div
v-animateonscroll="{ enterClass: 'animate-scalein', leaveClass: 'animate-fadeout' }"
2024-05-30 00:15:14 +00:00
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"
2024-05-30 00:13:31 +00:00
>
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">scalein</span>
2023-10-26 06:09:43 +00:00
</div>
</div>
<DocSectionCode :code="code" />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">fade-in</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">fade-left</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">fade-right</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">zoom</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">flip-left</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">flip-y</span>
</div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 17:53:11 +00:00
<span class="text-3xl font-bold">scalein</span>
2023-10-15 09:38:39 +00:00
</div>
`,
options: `
<template>
2024-05-20 12:14:38 +00:00
<div class="card flex flex-col items-center">
<div class="flex flex-col items-center gap-2">
2023-10-26 07:38:05 +00:00
<span class="text-xl font-medium">Scroll Down</span>
2024-05-20 12:14:38 +00:00
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
2023-10-26 07:38:05 +00:00
<i class="pi pi-arrow-down" />
</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-in</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-right</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">zoom</span>
2023-10-26 06:09:43 +00:00
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-y</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">scalein</span>
</div>
</div>
2023-10-15 09:38:39 +00:00
</template>
2023-10-26 17:53:11 +00:00
<style scoped>
@keyframes slidedown-icon {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.slidedown-icon {
animation: slidedown-icon;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
2023-10-15 09:38:39 +00:00
`,
composition: `
<template>
2024-05-20 12:14:38 +00:00
<div class="card flex flex-col items-center">
<div class="flex flex-col items-center gap-2">
2023-10-26 07:38:05 +00:00
<span class="text-xl font-medium">Scroll Down</span>
2024-05-20 12:14:38 +00:00
<span class="slidedown-icon h-8 w-8 bg-primary text-primary-contrast rounded-full inline-flex items-center justify-center">
2023-10-26 07:38:05 +00:00
<i class="pi pi-arrow-down" />
</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-in</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 06:09:43 +00:00
<span class="text-3xl font-bold">fade-right</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">zoom</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-left</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">flip-y</span>
</div>
2024-05-20 12:14:38 +00:00
<div class="h-[30rem]"></div>
2024-05-30 00:15:14 +00:00
<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">
2023-10-26 07:38:05 +00:00
<span class="text-3xl font-bold">scalein</span>
</div>
</div>
2023-10-26 06:29:07 +00:00
</template>
2023-10-26 17:53:11 +00:00
<style scoped>
@keyframes slidedown-icon {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.slidedown-icon {
animation: slidedown-icon;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
2023-10-26 06:29:07 +00:00
`
}
};
}
};
</script>
2023-10-25 04:01:16 +00:00
<style scoped>
@keyframes slidedown-icon {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.slidedown-icon {
animation: slidedown-icon;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>