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

Update doc for animate

pull/4704/head
Cagatay Civici 2023-10-26 12:37:23 +03:00
parent 08bd3118ea
commit 51446f2a8b
3 changed files with 3 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/lib/animateonscroll/AnimateOnScroll.d.ts vendored
View File

@ -8,50 +8,31 @@
*/
import { DirectiveBinding, ObjectDirective } from 'vue';
import { DirectiveHooks } from '../basedirective/BaseDirective';
import { PassThroughOptions } from '../passthrough';
import { PassThrough } from '../ts-helpers';
/**
* Defines options of AnimateOnScroll.
*/
export interface AnimateOnScrollOptions {
/**
* AnimateOnScroll scroll to add when item begins to get displayed.
* Style class to add when item goes into viewport, use white space as a delimeter to define multiple classes.
*/
enterClass?: string | undefined;
/**
* AnimateOnScroll scroll to add when item begins to get hidden.
* Style class to add when item leaves the viewport, use white space as a delimeter to define multiple classes.
*/
leaveClass?: string | undefined;
/**
* Specifies the `root` option of the IntersectionObserver API
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)
*/
root?: Element | Document | null;
/**
* Specifies the `rootMargin` option of the IntersectionObserver API
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)
*/
rootMargin?: string;
/**
* Specifies the `threshold` option of the IntersectionObserver API
* [MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)
*/
threshold?: ReadonlyArray<number>;
/**
* Whether the `enterClass` animation will run if the target is in the viewport when the page is loaded.
*/
animateOnLoad?: boolean;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {AnimateOnScrollDirectivePassThroughOptions}
*/
pt?: PassThrough<AnimateOnScrollDirectivePassThroughOptions>;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
}
/**

2
components/lib/animateonscroll/AnimateOnScroll.js
View File

@ -43,7 +43,7 @@ const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
entry.isIntersecting ? this.enter() : this.leave();
}
} else if (entry.isIntersecting) {
this.$value.animateOnLoad ? this.enter() : (this.$el.style.opacity = '');
this.enter();
}
this.isObserverActive = true;

16
doc/animateonscroll/BasicDoc.vue
View File

@ -26,10 +26,6 @@
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomindown', 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-down</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>
@ -68,10 +64,6 @@ export default {
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomindown', 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-down</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>
@ -111,10 +103,6 @@ export default {
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomindown', 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-down</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>
@ -155,10 +143,6 @@ export default {
<span class="text-3xl font-bold">zoom</span>
</div>
<div class="h-30rem"></div>
<div v-animateonscroll="{ enterClass: 'zoomindown', 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-down</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>