Animate directive implemented to the docs

assets/menu/menu.json

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

doc/animate/BasicDoc.vue

@@ -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>

doc/animate/ImportDoc.vue

@@ -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>

pages/animate/index.vue

@@ -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>

plugins/primeVue.js

@@ -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);