From 47ae11bc58b9cfa977a8247e996cdba6fc99506f Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Fri, 20 Sep 2024 11:07:04 +0100
Subject: [PATCH] 104a6 simpler submit transition (#576)

* better submit transition

* transition

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 .../global/transitions/VTransition.vue        | 26 ++++++++++++++-----
 .../open/forms/OpenCompleteForm.vue           | 15 +++--------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/client/components/global/transitions/VTransition.vue b/client/components/global/transitions/VTransition.vue
index dd9eefa1..a0282cf1 100644
--- a/client/components/global/transitions/VTransition.vue
+++ b/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>
-export default {
-  name: "VTransition",
-  props: { name: {type: String,  default: "slideInUp" } },
-}
+<script setup>
+const props = defineProps({
+  name: {
+    type: String,
+    default: "slideInUp"
+  }
+})
 </script>
diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index 8e47be86..1c6a516e 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/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-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"
-    >
+    <v-transition name="fade">
       <div
         v-if="!submitted"
         key="form"
@@ -193,7 +184,7 @@
           </a>
         </p>
       </div>
-    </transition>
+    </v-transition>
   </div>
 </template>