From edfcf5a736c644aca6986599f081c186cd098c8f Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Mon, 19 May 2025 19:42:33 +0200
Subject: [PATCH] Enhance VTransition and OpenForm Components for Improved
 Animation and Structure

- Added a new transition effect named 'fadeHeight' in `VTransition.vue` to enhance the visual experience during component transitions.
- Wrapped `open-form-field` components in `OpenForm.vue` with the newly created `VTransition` to apply the fadeHeight transition, improving the overall user experience during form interactions.

These changes aim to provide smoother animations and better structure in the form components, enhancing user engagement and visual appeal.
---
 client/components/global/transitions/VTransition.vue | 11 +++++++++++
 client/components/open/forms/OpenForm.vue            | 12 +++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/client/components/global/transitions/VTransition.vue b/client/components/global/transitions/VTransition.vue
index 7fbafa30..ff778d2e 100644
--- a/client/components/global/transitions/VTransition.vue
+++ b/client/components/global/transitions/VTransition.vue
@@ -22,6 +22,17 @@
   >
     <slot />
   </transition>
+  <transition
+    v-else-if="name === 'fadeHeight'"
+    enter-active-class="transition-all duration-500 ease-in-out overflow-hidden"
+    enter-from-class="opacity-0 -translate-y-2 max-h-0"
+    enter-to-class="opacity-100 translate-y-0 max-h-screen"
+    leave-active-class="transition-all duration-300 ease-in-out overflow-hidden"
+    leave-from-class="opacity-100 translate-y-0 max-h-screen"
+    leave-to-class="opacity-0 -translate-y-2 max-h-0"
+  >
+    <slot />
+  </transition>
 </template>
 
 <script setup>
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index 743aa836..7b3df667 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -30,11 +30,13 @@
           @change="handleDragDropped"
         >
           <template #item="{element}">
-            <open-form-field
-              :field="element"
-              :form-manager="formManager"
-              :theme="theme"
-            />
+            <VTransition name="fadeHeight">
+              <open-form-field
+                :field="element"
+                :form-manager="formManager"
+                :theme="theme"
+              />
+            </VTransition>
           </template>
         </draggable>
       </div>