AnimateOnScroll updates
Tuğçe Küçükoğlu
parent
b52e8c4f0d
commit
a29cf2c280
|
|
@ -6,11 +6,11 @@
|
|||
</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div v-animate="{ 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">
|
||||
<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>
|
||||
<div class="h-30rem"></div>
|
||||
<div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -24,11 +24,11 @@ export default {
|
|||
code: {
|
||||
basic: `
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div v-animate="{ 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">
|
||||
<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>
|
||||
<div class="h-30rem"></div>
|
||||
<div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -36,11 +36,11 @@ export default {
|
|||
options: `
|
||||
<template>
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div v-animate="{ 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">
|
||||
<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>
|
||||
<div class="h-30rem"></div>
|
||||
<div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -49,11 +49,11 @@ export default {
|
|||
composition: `
|
||||
<template>
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<div v-animate="{ 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">
|
||||
<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>
|
||||
<div class="h-30rem"></div>
|
||||
<div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -9,9 +9,9 @@ export default {
|
|||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import Animate from 'primevue/animate';
|
||||
import AnimateOnScroll from 'primevue/animateonscroll';
|
||||
|
||||
app.directive('animate', Animate);
|
||||
app.directive('animateonscroll', AnimateOnScroll);
|
||||
`
|
||||
}
|
||||
};
|
||||
|
|
@ -1,10 +1,16 @@
|
|||
<template>
|
||||
<DocComponent title="Vue Animate Directive" header="Animate" description="Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load." :componentDocs="docs" :apiDocs="['Animate']" />
|
||||
<DocComponent
|
||||
title="Vue AnimateOnScroll Directive"
|
||||
header="Animate"
|
||||
description="AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load."
|
||||
:componentDocs="docs"
|
||||
:apiDocs="['Animate']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BasicDoc from '@/doc/animate/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/animate/ImportDoc.vue';
|
||||
import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
|
||||
import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -6,56 +6,56 @@
|
|||
<div class="features-container">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">80+ UI Components</div>
|
||||
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive Vue Components.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Styled or Unstyled</div>
|
||||
<p class="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Community</div>
|
||||
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Accessibility</div>
|
||||
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Enterprise Support</div>
|
||||
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Mobile</div>
|
||||
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Blocks</div>
|
||||
<p class="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center">
|
||||
<div v-animate.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<div v-animateonscroll.once="{ enterClass: 'fadein' }" class="box p-4 w-full animation-duration-500">
|
||||
<img src="https://primefaces.org/cdn/primevue/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3" />
|
||||
<div class="font-semibold mb-3 text-lg">Typescript</div>
|
||||
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue