fix: animation

Author: alexiscolin

src/components/faucet/FaucetDetail.vue

@@ -5,7 +5,7 @@
     ref="DOMpopup"
     class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
   >
-    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full" v-if="store.isOpen">
+    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full" v-if="store.isVisible">
       <FaucetContentForm :name="store.selectedFaucet.name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
       <div>
         <div ref="gnoRequestLogo" v-show="store.contentStep >= 1" class="opacity-0">

src/components/ui/Recaptcha.vue

@@ -8,10 +8,8 @@ import { onMounted } from 'vue'
 type Props = {
   captchakey: string
 }
-const props = defineProps<Props>()
+defineProps<Props>()
 
-console.log(props.captchakey)
-onMounted(() => console.log(props.captchakey))
 const emit = defineEmits(['validation'])
 
 const handleError = (res: string) => {

src/stores/faucetDetail.ts

@@ -14,6 +14,7 @@ export const useFaucetDetail = defineStore('faucetDetail', {
       title: null as HTMLElement | null,
     },
     isOpen: false,
+    isVisible: false,
     contentStep: 0,
     status: 'null' as RequestStatus,
     selectedFaucet: {} as Faucet,
@@ -50,6 +51,7 @@ export const useFaucetDetail = defineStore('faucetDetail', {
 
     popupToggle() {
       this.isOpen = !this.isOpen
+      if (this.isOpen) this.isVisible = true
 
       this.titleToggle()
 
@@ -75,7 +77,10 @@ export const useFaucetDetail = defineStore('faucetDetail', {
         duration: 0.6,
         delay: this.isOpen ? 0.4 : 0,
         onComplete: () => {
-          if (!this.isOpen) this.contentStep = 0
+          if (!this.isOpen) {
+            this.contentStep = 0
+            this.isVisible = false
+          }
           this.status = 'null'
         },
       })