Update animateOnScroll demos
Cagatay Civici
parent
b5a8928965
commit
5102cc089e
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
||||
<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>
|
||||
<p>Component does not include any interactive elements.</p>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<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>
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -10,31 +10,37 @@
|
|||
</span>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -47,34 +53,32 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<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>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">fade-left</span>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">fade-right</span>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">zoom</span>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">flip-left</span>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">flip-y</span>
|
||||
</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">
|
||||
<span class="text-3xl font-bold">scalein</span>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
`,
|
||||
options: `
|
||||
|
|
@ -87,35 +91,63 @@ export default {
|
|||
</span>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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: `
|
||||
<template>
|
||||
|
|
@ -127,35 +159,63 @@ export default {
|
|||
</span>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</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-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-image: radial-gradient(var(--primary-300), var(--primary-600));
|
||||
border-radius: 50% !important;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,8 @@ export default {
|
|||
<Button icon="pi pi-times" severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</template>`
|
||||
</template>
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue