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

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

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>