README

清理您的 Alpine JS 动画。

<div class="fixed inset-0 overflow-hidden">
  <div class="absolute inset-0 overflow-hidden">
    <!--
      Background overlay, show/hide based on slide-over state.

      Entering: "ease-in-out duration-500"
        From: "opacity-0"
        To: "opacity-100"
      Leaving: "ease-in-out duration-500"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <div class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <section class="absolute inset-y-0 right-0 pl-10 max-w-full flex">
      <!--
        Slide-over panel, show/hide based on slide-over state.

        Entering: "transform transition ease-in-out duration-500 sm:duration-700"
          From: "translate-x-full"
          To: "translate-x-0"
        Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
          From: "translate-x-0"
          To: "translate-x-full"
      -->
      <div class="w-screen max-w-md">
        <div class="h-full flex flex-col space-y-6 py-6 bg-white shadow-xl overflow-y-scroll">
          <header class="px-4 sm:px-6">
            <div class="flex items-start justify-between space-x-3">
              <h2 class="text-lg leading-7 font-medium text-gray-900">
                Panel title
              </h2>
              <div class="h-7 flex items-center">
                <button aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
            </div>
          </header>
          <div class="relative flex-1 px-4 sm:px-6">
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

请注意，Tailwind UI 包含我们应该应用的动画。这些动画是 Alpinimations 默认包含的。让我们用 Alpine 丰富我们的组件

<div x-data="{ showSlideover: false }" class="fixed inset-0 overflow-hidden">
  <div class="absolute inset-0 overflow-hidden">
    <div x-show="showSlideover" @anim('tailwindui.slideover.overlay') class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <section class="absolute inset-y-0 right-0 pl-10 max-w-full flex">
      <div x-show="showSlideover" @anim('tailwindui.slideover.panel') class="w-screen max-w-md">
        <div class="h-full flex flex-col space-y-6 py-6 bg-white shadow-xl overflow-y-scroll">
          <header class="px-4 sm:px-6">
            <div class="flex items-start justify-between space-x-3">
              <h2 class="text-lg leading-7 font-medium text-gray-900">
                Panel title
              </h2>
              <div class="h-7 flex items-center">
                <button @click="showSlideover = false" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
            </div>
          </header>
          <div class="relative flex-1 px-4 sm:px-6">
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

注意我们如何使用 @anim blade 指令来包含所有必要的 Alpine 动画指令。所有可用的 Tailwind UI 动画列表如下。

我们可以更进一步。因为大多数动画都与 x-show 相关，Alpinimations 包含了一个 @xshow blade 指令。看看它

<div x-data="{ showSlideover: false }" class="fixed inset-0 overflow-hidden">
  <div class="absolute inset-0 overflow-hidden">
    <div @xshow('showSlideover', 'tailwindui.slideover.overlay') class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

    <section class="absolute inset-y-0 right-0 pl-10 max-w-full flex">
      <div @xshow('showSlideover', 'tailwindui.slideover.panel') class="w-screen max-w-md">
        <div class="h-full flex flex-col space-y-6 py-6 bg-white shadow-xl overflow-y-scroll">
          <header class="px-4 sm:px-6">
            <div class="flex items-start justify-between space-x-3">
              <h2 class="text-lg leading-7 font-medium text-gray-900">
                Panel title
              </h2>
              <div class="h-7 flex items-center">
                <button @click="showSlideover = false" aria-label="Close panel" class="text-gray-400 hover:text-gray-500 transition ease-in-out duration-150">
                  <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
            </div>
          </header>
          <div class="relative flex-1 px-4 sm:px-6">
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

超级干净。

可用动画

Tailwind UI

下拉菜单

tailwindui.dropdown.panel - 可应用于所有下拉组件。 Tailwind UI 文档

菜单

tailwindui.menu.card - 可应用于如 Tailwind UI 英雄移动菜单中的移动菜单。 Tailwind UI 文档
tailwindui.menu.flyout - 与所有飞出菜单兼容。 Tailwind UI 文档
tailwindui.menu.off-canvas - 用于那些时尚的移动侧边栏菜单。 Tailwind UI 文档
tailwindui.menu.overlay - 当菜单显示时需要的任何覆盖背景，特别是在移动端。 Tailwind UI 文档

模态框

tailwindui.modal.overlay - 模态框显示时背后的覆盖层。 Tailwind UI 文档
tailwindui.modal.panel - 实际显示模态框内容的面板/卡片。 Tailwind UI 文档

通知

tailwindui.notification.panel - 通知的容器。 Tailwind UI 文档

选择框

tailwindui.select.popover - 选项菜单的弹出菜单。 Tailwind UI 文档

滑动覆盖层

tailwindui.slideover.close-button - 滑动覆盖层的关闭按钮。这可以应用于任何关闭按钮。 Tailwind UI 文档
tailwindui.slideover.overlay - 应用于某些滑动覆盖层的背景覆盖层。 Tailwind UI 文档
tailwindui.slideover.panel - 实际的滑动覆盖层面板/卡片，将包含您的内容。 Tailwind UI 文档

贡献

感谢您考虑为 Laravel 框架做出贡献！贡献指南可以在 Laravel 文档中找到。

行为准则

为了确保 Laravel 社区对所有人开放，请阅读并遵守行为准则。

许可

Laravel 框架是开源软件，采用 MIT 许可。

lukeraymonddowning / alpinimations

维护者

详细信息