How to configure duration in Vue 3 HeadlessUI transition effect

I am attempting to set up slot machine-style animation using Vue 3 with TailwindCSS and HeadlessUI. So far, I was able to set up my UI so that slot machine numbers drop in from the top and drop out the bottom based on cycles handled by a for-loop. The animation appears to work so far. However, I am now attempting to prevent each number from changing before the transition. I wish for each number to instead change during the period between the drop in and drop out. To handle this, I attempted to increase the number passed into the sleep function from 500 to 1200, in order to slow down the number. However, the sleep function appears to affect both the card transition and the number change, when I only want to modify the duration of the number change. How can I configure this set up so that the number does not change until after the card is out-of-sight/mid-transition?

Here is my code so far:

<template>
    <div class="flex flex-col items-center py-16">
      <div class="h-72 w-72">
        <div class="flex justify-center items-center w-full h-full p-4 rounded-md shadow-lg border-solid border-2 border-sky-500">
            <TransitionRoot
              appear
              :show="isShowing"
              as="template"
              enter="transition ease-in-out duration-[400ms]"
              enter-from="-translate-y-full opacity-0"
              enter-to="translate-y-0 opacity-100"
              leave="transition ease-in-out duration-[400ms]"
              leave-from="translate-y-0 opacity-100"
              leave-to="translate-y-full opacity-0"
            >

              <div class="h-full w-full rounded-md pt-16 bg-green-500 shadow-lg">
                <span v-if="numbers > 0" class="text-9xl">
                    
                </span>
              </div>
    
            </TransitionRoot>
        </div>
      </div>
      <button
        @click="resetIsShowing"
        class="mt-8 flex transform items-center rounded-full bg-black bg-opacity-20 px-3 py-2 text-sm font-medium text-white transition hover:scale-105 hover:bg-opacity-30 focus:outline-none active:bg-opacity-40"
      >
        <svg viewBox="0 0 20 20" fill="none" class="h-5 w-5 opacity-70">
          <path
            d="M14.9497 14.9498C12.2161 17.6835 7.78392 17.6835 5.05025 14.9498C2.31658 12.2162 2.31658 7.784 5.05025 5.05033C7.78392 2.31666 12.2161 2.31666 14.9497 5.05033C15.5333 5.63385 15.9922 6.29475 16.3266 7M16.9497 2L17 7H16.3266M12 7L16.3266 7"
            stroke="currentColor"
            stroke-width="1.5"
          />
        </svg>
  
        <span class="ml-3">Click to transition</span>
      </button>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { TransitionRoot } from '@headlessui/vue'
  
  const isShowing = ref(true)
  const numbers = ref([])
  const numberArray = ref(Array.from({length: 10}, (e, i)=> i + 1))

  const sleep = (milliseconds) => {
    return new Promise(resolve => setTimeout(resolve, milliseconds))
  }
  
  async function resetIsShowing() {
    for (let i = 0; i < numberArray.value.length; i++) {

        await sleep(1200)
        
        const index = numberArray.value[i]
        
        numbers.value = numberArray.value.filter(r => r === (index))[0]
        
        isShowing.value = false
        
        setTimeout(() => {
            isShowing.value = true
        }, 500)
    }
  }
  </script>
  

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jqkdbxO