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

Animate directive implemented to the docs

pull/4572/head
Tuğçe Küçükoğlu 2023-10-13 13:28:54 +03:00
parent 6dc9babdc9
commit 8e302a7eb7
5 changed files with 117 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/menu/menu.json
View File

@ -403,6 +403,10 @@
"name": "ProgressSpinner",
"to": "/progressspinner"
},
{
"name": "Animate",
"to": "/animate"
},
{
"name": "Ripple",
"to": "/ripple"

63
doc/animate/BasicDoc.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<DocSectionText v-bind="$attrs">
<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
animation if the element is entering or leaving the viewport.
</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">
<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">
<span class="text-900 text-3xl font-bold">flip up</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-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">
<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">
<span class="text-900 text-3xl font-bold">flip up</span>
</div>
</div>`,
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">
<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">
<span class="text-900 text-3xl font-bold">flip up</span>
</div>
</div>
</template>`,
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">
<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">
<span class="text-900 text-3xl font-bold">flip up</span>
</div>
</div>
</template>`
}
};
}
};
</script>

20
doc/animate/ImportDoc.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<DocSectionText v-bind="$attrs" />
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
import Animate from 'primevue/animate';
app.directive('animate', Animate);
`
}
};
}
};
</script>

27
pages/animate/index.vue Normal file
View File

@ -0,0 +1,27 @@
<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" />
</template>
<script>
import BasicDoc from '@/doc/animate/BasicDoc.vue';
import ImportDoc from '@/doc/animate/ImportDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'import',
label: 'Import',
component: ImportDoc
},
{
id: 'basic',
label: 'Basic',
component: BasicDoc
}
]
};
}
};
</script>

2
plugins/primeVue.js
View File

@ -8,10 +8,12 @@ import DocSections from '@/components/doc/DocSections';
import DocSectionText from '@/components/doc/DocSectionText';
import CodeHighlight from '@/components/layout/CodeHighlight';
import DevelopmentSection from '@/components/layout/DevelopmentSection';
import Animate from '@/components/lib/animate/Animate';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(PrimeVue, { ripple: true });
nuxtApp.vueApp.directive('animate', Animate);
nuxtApp.vueApp.directive('code', CodeHighlight);
nuxtApp.vueApp.component('DocSections', DocSections);