Tailwind CSS & Alpine JS transition out issue

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.