vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 17:02:38 +00:00
Code Issues Projects Releases Packages Wiki Activity

Doc on animate scroll

Browse source
This commit is contained in:
Cagatay Civici 2023-10-25 07:01:16 +03:00
parent 1b120c9e1a
commit 314856a4e3
5 changed files with 38 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

42
doc/animateonscroll/BasicDoc.vue
View file

@ -1,17 +1,21 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
AnimateOnScroll uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes <i>enterClass</i> and <i>leaveClass</i> properties to simply add animation class during scroll or page load to manage elements
animation if the element is entering or leaving the viewport.
</p>
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties.</p>
</DocSectionText>
<div class="card flex flex-column align-items-center">
<div v-animateonscroll="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip</span>
<div class="flex flex-column align-items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span>
<span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
<i class="pi pi-arrow-down" />
</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
<span class="text-900 text-3xl font-bold">flip up</span>
<div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-2000">
<span class="text-3xl font-bold">fade-in</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-2000">
<span class="text-3xl font-bold">fade-left</span>
</div>
</div>
<DocSectionCode :code="code" />
@ -63,3 +67,25 @@ export default {
}
};
</script>
<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>