vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update animateOnScroll demos

pull/4704/head
Cagatay Civici 2023-10-26 20:53:11 +03:00
parent b5a8928965
commit 5102cc089e
3 changed files with 120 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/animateonscroll/AccessibilityDoc.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p>AnimateOnScroll does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required.</p> <p>AnimateOnScroll does not require any roles and attributes.</p>
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<p>Component does not include any interactive elements.</p> <p>Component does not include any interactive elements.</p>

142
doc/animateonscroll/BasicDoc.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties.</p> <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> </DocSectionText>
<div class="card flex flex-column align-items-center"> <div class="card flex flex-column align-items-center overflow-hidden">
<div class="flex flex-column align-items-center gap-2"> <div class="flex flex-column align-items-center gap-2">
<span class="text-xl font-medium">Scroll Down</span> <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"> <span class="slidedown-icon h-2rem w-2rem bg-primary border-circle inline-flex align-items-center justify-content-center">
@ -10,31 +10,37 @@
</span> </span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<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-1000"> <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">fade-in</span> <span class="text-3xl font-bold">fade-in</span>
</div> </div>
<div class="h-30rem"></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-1000 animation-ease-in-out"> <div
v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }"
class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
>
<span class="text-3xl font-bold">fade-left</span> <span class="text-3xl font-bold">fade-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div
v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }"
class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out"
>
<span class="text-3xl font-bold">fade-right</span> <span class="text-3xl font-bold">fade-right</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000"> <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">zoom</span> <span class="text-3xl font-bold">zoom</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-left</span> <span class="text-3xl font-bold">flip-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-y</span> <span class="text-3xl font-bold">flip-y</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">scalein</span> <span class="text-3xl font-bold">scalein</span>
</div> </div>
</div> </div>
@ -47,35 +53,33 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<div class="card flex flex-column align-items-center"> <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<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-1000">
<span class="text-3xl font-bold">fade-in</span> <span class="text-3xl font-bold">fade-in</span>
</div> </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-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-left</span> <span class="text-3xl font-bold">fade-left</span>
</div> </div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-right</span> <span class="text-3xl font-bold">fade-right</span>
</div> </div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000"> <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">zoom</span> <span class="text-3xl font-bold">zoom</span>
</div> </div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-left</span> <span class="text-3xl font-bold">flip-left</span>
</div> </div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-y</span> <span class="text-3xl font-bold">flip-y</span>
</div> </div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">scalein</span> <span class="text-3xl font-bold">scalein</span>
</div> </div>
</div>
`, `,
options: ` options: `
<template> <template>
@ -87,35 +91,63 @@ export default {
</span> </span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<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-1000"> <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">fade-in</span> <span class="text-3xl font-bold">fade-in</span>
</div> </div>
<div class="h-30rem"></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-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-left</span> <span class="text-3xl font-bold">fade-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-right</span> <span class="text-3xl font-bold">fade-right</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000"> <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">zoom</span> <span class="text-3xl font-bold">zoom</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-left</span> <span class="text-3xl font-bold">flip-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-y</span> <span class="text-3xl font-bold">flip-y</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">scalein</span> <span class="text-3xl font-bold">scalein</span>
</div> </div>
</div> </div>
</template> </template>
<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;
}
.box {
background-image: radial-gradient(var(--primary-300), var(--primary-600));
border-radius: 50% !important;
color: var(--primary-color-text);
}
</style>
`, `,
composition: ` composition: `
<template> <template>
@ -127,35 +159,63 @@ export default {
</span> </span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<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-1000"> <div v-animateonscroll="{ enterClass: 'fadein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">fade-in</span> <span class="text-3xl font-bold">fade-in</span>
</div> </div>
<div class="h-30rem"></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-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinleft', leaveClass: 'fadeoutleft' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-left</span> <span class="text-3xl font-bold">fade-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'fadeinright', leaveClass: 'fadeoutright' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">fade-right</span> <span class="text-3xl font-bold">fade-right</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000"> <div v-animateonscroll="{ enterClass: 'zoomin', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000">
<span class="text-3xl font-bold">zoom</span> <span class="text-3xl font-bold">zoom</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipleft', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-left</span> <span class="text-3xl font-bold">flip-left</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'flipup', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">flip-y</span> <span class="text-3xl font-bold">flip-y</span>
</div> </div>
<div class="h-30rem"></div> <div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex bg-primary justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-in-out"> <div v-animateonscroll="{ enterClass: 'scalein', leaveClass: 'fadeout' }" class="flex box shadow-4 justify-content-center align-items-center h-10rem w-10rem sm:h-15rem sm:w-15rem border-round animation-duration-1000 animation-ease-in-out">
<span class="text-3xl font-bold">scalein</span> <span class="text-3xl font-bold">scalein</span>
</div> </div>
</div> </div>
</template> </template>
<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;
}
.box {
background-image: radial-gradient(var(--primary-300), var(--primary-600));
border-radius: 50% !important;
color: var(--primary-color-text);
}
</style>
` `
} }
}; };
@ -183,4 +243,10 @@ export default {
animation-duration: 3s; animation-duration: 3s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.box {
background-image: radial-gradient(var(--primary-300), var(--primary-600));
border-radius: 50% !important;
color: var(--primary-color-text);
}
</style> </style>

3
doc/inputgroup/ButtonDoc.vue
View File

@ -84,7 +84,8 @@ export default {
<Button icon="pi pi-times" severity="danger" /> <Button icon="pi pi-times" severity="danger" />
</div> </div>
</div> </div>
</template>` </template>
`
} }
}; };
} }