Tailwind CSS 和 Alpine JS 过渡问题答案

【问题标题】：Tailwind CSS & Alpine JS transition out issueTailwind CSS 和 Alpine JS 过渡问题
【发布时间】：2021-02-08 22:23:59
【问题描述】：

我在 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>

【问题讨论】：

标签： css tailwind-css alpine.js

【解决方案1】：

因为您使用x-class 绑定手动应用hidden 类，所以没有机会制作出动画。

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

只需确保将 fixed 类添加到您的 class= 属性中，这样它仍会应用于您的 CSS。

【讨论】：