AnimateOnScroll documentation updated
parent
d1997c7855
commit
5f57d57406
|
@ -0,0 +1,9 @@
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h3>Keyboard Support</h3>
|
||||||
|
<p>Component does not include any interactive elements.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
</template>
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<DocSectionText v-bind="$attrs">
|
<DocSectionText v-bind="$attrs">
|
||||||
<p>
|
<p>
|
||||||
Animate 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
|
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.
|
animation if the element is entering or leaving the viewport.
|
||||||
</p>
|
</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<DocSectionText v-bind="$attrs">
|
||||||
|
<p>When <i>once</i> modifiers are added to an AnimateOnScroll, it works only once.</p>
|
||||||
|
</DocSectionText>
|
||||||
|
<div class="card flex flex-column align-items-center">
|
||||||
|
<div v-animateonscroll.once="{ 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>
|
||||||
|
<DocSectionCode :code="code" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: {
|
||||||
|
basic: `
|
||||||
|
<div class="card flex flex-column align-items-center">
|
||||||
|
<div v-animateonscroll.once="{ 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>
|
||||||
|
`,
|
||||||
|
options: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-column align-items-center">
|
||||||
|
<div v-animateonscroll.once="{ 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>
|
||||||
|
</template>
|
||||||
|
`,
|
||||||
|
composition: `
|
||||||
|
<template>
|
||||||
|
<div class="card flex flex-column align-items-center">
|
||||||
|
<div v-animateonscroll.once="{ 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>
|
||||||
|
</template>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -9,8 +9,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import AccessibilityDoc from '@/doc/animateonscroll/AccessibilityDoc.vue';
|
||||||
import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
|
import BasicDoc from '@/doc/animateonscroll/BasicDoc.vue';
|
||||||
import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
|
import ImportDoc from '@/doc/animateonscroll/ImportDoc.vue';
|
||||||
|
import OnceDoc from '@/doc/animateonscroll/OnceDoc.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -25,6 +27,16 @@ export default {
|
||||||
id: 'basic',
|
id: 'basic',
|
||||||
label: 'Basic',
|
label: 'Basic',
|
||||||
component: BasicDoc
|
component: BasicDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'once',
|
||||||
|
label: 'Once',
|
||||||
|
component: OnceDoc
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'accessibility',
|
||||||
|
label: 'Accessibility',
|
||||||
|
component: AccessibilityDoc
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue