From 78b8c8330a9528b4b15135c435eaa1aa11ec688d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 9 Sep 2024 19:33:44 +0300
Subject: [PATCH] Updated animation sample

---
 apps/showcase/doc/styleclass/AnimationDoc.vue | 109 ++++++++++++++----
 1 file changed, 87 insertions(+), 22 deletions(-)

diff --git a/apps/showcase/doc/styleclass/AnimationDoc.vue b/apps/showcase/doc/styleclass/AnimationDoc.vue
index 1779c9fbf..fc41d165e 100644
--- a/apps/showcase/doc/styleclass/AnimationDoc.vue
+++ b/apps/showcase/doc/styleclass/AnimationDoc.vue
@@ -4,14 +4,30 @@
             Classes to apply during enter and leave animations are specified using the <i>enterFromClass</i>, <i>enterActiveClass</i>, <i>enterToClass</i>, <i>leaveFromClass</i>, <i>leaveActiveClass</i>,<i>leaveToClass</i>properties. In addition in
             case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
         </p>
+        <p>First example uses a custom fade animation, and second one uses animate-slide from <NuxtLink to="/tailwind/#animations">tailwind-primeui</NuxtLink> plugin.</p>
     </DocSectionText>
-    <div class="card flex flex-col items-center">
-        <div>
-            <Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
+    <div class="card flex items-center justify-center gap-8">
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="my-hidden animate-duration-500 box1">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
+                </div>
+            </div>
         </div>
-        <div class="my-hidden animate-duration-500 box">
-            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="hidden animate-duration-500 box2 overflow-hidden">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+                </div>
+            </div>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -23,21 +39,55 @@ export default {
         return {
             code: {
                 basic: `
-<Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
-<div class="my-hidden animate-duration-500 box">
-    <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+<div class="card flex items-center justify-center gap-8">
+    <div class="flex flex-col items-center">
+        <div>
+            <Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
+        </div>
+        <div class="h-32">
+            <div class="my-hidden animate-duration-500 box1">
+                <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
+            </div>
+        </div>
+    </div>
+    <div class="flex flex-col items-center">
+        <div>
+            <Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
+            <Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
+        </div>
+        <div class="h-32">
+            <div class="hidden animate-duration-500 box2 overflow-hidden">
+                <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+            </div>
+        </div>
+    </div>
 </div>
 `,
                 options: `
 <template>
-    <div class="card flex flex-col items-center">
-        <div>
-            <Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
+    <div class="card flex items-center justify-center gap-8">
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="my-hidden animate-duration-500 box1">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
+                </div>
+            </div>
         </div>
-        <div class="my-hidden animate-duration-500 box">
-            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="hidden animate-duration-500 box2 overflow-hidden">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -79,13 +129,28 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-col items-center">
-        <div>
-            <Button v-styleclass="{ selector: '.box', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="Hide" severity="secondary" />
+    <div class="card flex items-center justify-center gap-8">
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box1', enterFromClass: 'my-hidden', enterActiveClass: 'my-fadein' }" label="FadeIn" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box1', leaveActiveClass: 'my-fadeout', leaveToClass: 'my-hidden' }" label="FadeOut" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="my-hidden animate-duration-500 box1">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Custom</div>
+                </div>
+            </div>
         </div>
-        <div class="my-hidden animate-duration-500 box">
-            <div class="flex bg-green-500 text-white items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+        <div class="flex flex-col items-center">
+            <div>
+                <Button v-styleclass="{ selector: '.box2', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown' }" label="SlideDown" class="mr-2" />
+                <Button v-styleclass="{ selector: '.box2', leaveActiveClass: 'animate-slideup', leaveToClass: 'hidden' }" label="SlideUp" severity="secondary" />
+            </div>
+            <div class="h-32">
+                <div class="hidden animate-duration-500 box2 overflow-hidden">
+                    <div class="flex bg-primary text-primary-contrast items-center justify-center py-4 rounded-md mt-4 font-bold w-32 h-32">Content</div>
+                </div>
+            </div>
         </div>
     </div>
 </template>