104a6 simpler submit transition (#576)

* better submit transition

* transition

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/global/transitions/VTransition.vue

@@ -1,6 +1,6 @@
 <template>
   <transition
-    v-if="name == 'slideInUp'"
+    v-if="name === 'slideInUp'"
     enter-active-class="linear duration-300 overflow-hidden"
     enter-from-class="max-h-0"
     enter-to-class="max-h-screen"
@@ -10,11 +10,25 @@
   >
     <slot />
   </transition>
+  <transition
+    v-else-if="name === 'fade'"
+    mode="out-in"
+    enter-active-class="transition-opacity duration-300"
+    enter-from-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="transition-opacity duration-300"
+    leave-from-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <slot />
+  </transition>
 </template>
 
-<script>
+<script setup>
-export default {
+const props = defineProps({
-  name: "VTransition",
+  name: {
-  props: { name: {type: String,  default: "slideInUp" } },
+    type: String,
+    default: "slideInUp"
   }
+})
 </script>

client/components/open/forms/OpenCompleteForm.vue

@@ -49,7 +49,7 @@
       </div>
     </div>
 
-    <v-transition>
+    <v-transition name="fade">
       <div
         v-if="!form.is_password_protected && form.password && !hidePasswordDisabledMsg"
         class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 dark:bg-yellow-600/20 border-yellow-500 dark:border-yellow-500/20"
@@ -100,16 +100,7 @@
       :specify-form-owner="true"
     />
 
-    <transition
+    <v-transition name="fade">
-      v-if="!form.is_password_protected && (!isPublicFormPage || (!form.is_closed && !form.max_number_of_submissions_reached && form.visibility!='closed'))"
-      enter-active-class="duration-500 ease-out"
-      enter-from-class="translate-x-full opacity-0"
-      enter-to-class="translate-x-0 opacity-100"
-      leave-active-class="duration-500 ease-in"
-      leave-from-class="translate-x-0 opacity-100"
-      leave-to-class="translate-x-full opacity-0"
-      mode="out-in"
-    >
       <div
         v-if="!submitted"
         key="form"
@@ -193,7 +184,7 @@
           </a>
         </p>
       </div>
-    </transition>
+    </v-transition>
   </div>
 </template>