Tailwind CSS & Alpine JS transition out issue - css

Question

I've got a very simple button & modal combo working inside Tailwind & Alpine - https://jsfiddle.net/0pso5cxh/
My issue is that on the leave transition (cancel button or close icon), none of the fade animation is happening at all and it just snaps to 0 opacity. This is my first use of both Tailwind and Alpine so any pointers would be massively appreciated!
<div x-data="{ addDonationOpen: false }">
<button #click="addDonationOpen = !addDonationOpen" class="bg-teal-700 hover:bg-teal-500 hover:text-gray-900 focus:bg-teal-500 focus:outline-none focus:shadow-outline text-white focus:text-gray-900 px-4 py-2 rounded font-medium mr-6"><i class="fas fa-plus-square pr-1"></i> Add Donation</button>
<div x-show="addDonationOpen" :class="{'flex': addDonationOpen, 'fixed': addDonationOpen, 'hidden': !addDonationOpen}" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0" x-transition:enter-end="transform opacity-100" x-transition:leave="transition ease-in duration-1000" x-transition:leave-start="transform opacity-100" x-transition:leave-end="transform opacity-0" class="w-full h-100 inset-0 z-50 overflow-hidden justify-center items-center" style="background: rgba(0,0,0,.7);">
<div class="border border-teal-500 shadow-lg modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
<div class="modal-content py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-3">
<p class="text-2xl font-bold">Header</p>
<div #click="addDonationOpen = !addDonationOpen" class="modal-close cursor-pointer z-50">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
viewBox="0 0 18 18">
<path
d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
</path>
</svg>
</div>
</div>
<!--Body-->
<div class="my-5">
<p>Inliberali Persius Multi iustitia pronuntiaret expeteretur sanos didicisset laus angusti ferrentur arbitrium arbitramur huic desiderent.?</p>
</div>
<!--Footer-->
<div class="flex justify-end pt-2">
<button #click="addDonationOpen = !addDonationOpen" class="focus:outline-none modal-close px-4 bg-gray-400 p-3 rounded-lg text-black hover:bg-gray-300">Cancel</button>
<button class="focus:outline-none px-4 bg-teal-500 p-3 ml-3 rounded-lg text-white hover:bg-teal-400">Confirm</button>
</div>
</div>
</div>
</div>
</div>

Answer 1

It's not getting a chance to do the out animation because you're applying a hidden class manually using the x-class binding.
You can remove the whole x-class set of conditions you've got there on line 4 - the x-show directive will handle all that for you in a way that manages the transition.
Just make sure you add the fixed class to your class= attribute so that it still gets applied to your CSS.

Answer 2

For me, I just use this code below in the head of file
<style>
[x-cloak] { display: none }
</style>
and x-cloak in any elements
x-cloak