I'm attempting to implement a sliding animation for this modal component that emerges from the bottom when the user clicks the button. The background blur displays correctly upon entering, but the modal fails to animate at all. My desired outcome is for it to slide in on opening and slide out on closure.
Any suggestions on the most effective approach to achieve this?
<template>
<div>
<a @click.prevent="toggle()">
<slot name="button"></slot>
</a>
<div v-if="show" class="bg bg-transition fixed overflow-y-scroll top-0 left-0 flex flex-col items-center justify-center h-screen w-screen bg-opacity-25 bg-gray-400" style="backdrop-filter: blur(15px);">
<transition mode="out-in" name="slideup">
<div v-if="show" class="absolute top-0 right-0 left-0 bg-white rounded-tl-4xl rounded-tr-4xl w-full p-6 pb-0" style="margin-top:176px">
<span class="flex items-center justify-center w-8 h-8 rounded-full bg-white text-gray-800 shadow" @click.prevent="toggle()">
<svg
class="fill-current w-full"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z"
/>
<path d="M0,0H24V24H0Z" fill="none" />
</svg>
</span>
<div class="flex flex-col divide-y divide-gray-600">
<div>
<h1 class="heading mt-6">Placeholder Heading <br>R000pm</h1>
<div class="mt-12 divide-y divide-gray-600">
<div class="pb-8">
<h4 class="subheading">Placeholder Subheading</h4>
<p class="par mt-3">Placeholder Paragraph</p>
<div class="flex items-center justify-between mt-5">
<p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
<p class="font-bold text-gray-1000 leading-none">R000,00</p>
</div>
</div>
<div class="py-8">
<h4 class="subheading">Placeholder Subheading</h4>
<p class="par mt-3">Placeholder Paragraph</p>
<div class="flex items-center justify-between mt-5">
<p class="font-semibold text-gray-1000 leading-none">Placeholder limit</p>
<p class="font-bold text-gray-1000 leading-none">R000,00</p>
</div>
</div>
// Repeat content until closing tags...
</div>
</div>
// More repeating content...
</div>
</transition>
</div>
</lt;/div>
</template>
// CSS styling ommitted
....