Tailwind CSS 和 Alpine JS 过渡问题

Question

我有一个非常简单的按钮和模式组合在 Tailwind 和 Alpine 中工作 - https://jsfiddle.net/0pso5cxh/

我的问题是，在离开过渡（取消按钮或关闭图标）时，没有任何淡入淡出动画发生，它只是捕捉到 0 不透明度。这是我第一次同时使用 Tailwind 和 Alpine，因此我们将不胜感激！

      <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

它没有机会执行输出动画，因为您正在hidden使用绑定手动应用类x-class。

您可以删除x-class第 4 行中的整套条件 - 该x-show指令将以管理转换的方式为您处理所有这些条件。

只需确保将该fixed类添加到您的class=属性中，以便它仍然应用到您的 CSS 中。