无 Jank 的 Tailwind / Alpine.js 手风琴

Posted 2023-03-07

【中文标题】无 Jank 的 Tailwind / Alpine.js 手风琴

【英文标题】：Jank-free Tailwind / Alpine.js accordion

【发布时间】：2021-12-26 09:55:45

【问题描述】：

我正在制作一个使用 Tailwind 和 Alpine.js (2.x) 的手风琴，但我似乎无法平滑过渡，它太笨拙了。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
        <ol class="max-w-sm p-4">
            <li class="pb-6 mb-6 border-b" x-data="isOpen : true ">
                <h3 class="flex text-2xl mb-6" :class=" 'mb-6': isOpen ">
                    <button class="text-left" type="button" @click="isOpen = !isOpen">
                    Heading 1
                    </button>
                </h3>
                <div x-show.transition.duration.300ms.origin.bottom="isOpen" @click.away="isOpen = false">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
                </div>
            </li>
            <li class="pb-6 mb-6 border-b" x-data="isOpen : false ">
                <h3 class="flex text-2xl mb-6" :class=" 'mb-6': isOpen ">
                    <button class="text-left" type="button" @click="isOpen = !isOpen">
                    Heading 2
                    </button>
                </h3>
                <div x-show.transition.duration.300ms.origin.bottom="isOpen" @click.away="isOpen = false">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
                </div>
            </li>      
        </ol>

关于如何使它更流畅的任何提示？

【参考方案1】：

于 2022 年 1 月 6 日编辑

手风琴（以及其他组件）现在是官方AlpineJS documentation 的一部分。将它们用于完美的开箱即用手风琴。

原答案

关于平滑度的主要问题与mb-6 不转换有关。下面建议了一个快速修复（对孩子使用mt-6）。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
            <ol class="max-w-sm p-4">
                <li class="pb-6 mb-6 border-b" x-data="isOpen : true ">
                    <h3 class="flex text-2xl">
                        <button class="text-left" type="button" @click="isOpen = !isOpen">
                        Heading 1
                        </button>
                    </h3>
                    <div class="mt-6" x-show.transition.duration.300ms.origin.bottom="isOpen" @click.away="isOpen = false">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
                    </div>
                </li>
                <li class="pb-6 mb-6 border-b" x-data="isOpen : false ">
                    <h3 class="flex text-2xl">
                        <button class="text-left" type="button" @click="isOpen = !isOpen">
                        Heading 2
                        </button>
                    </h3>
                    <div class="mt-6" x-show.transition.duration.300ms.origin.bottom="isOpen" @click.away="isOpen = false">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rerum in tempore sit ducimus doloribus quod commodi eligendi ipsam porro non fugiat nisi eaque delectus harum aspernatur recusandae incidunt quasi.</p>
                    </div>
                </li>      
            </ol>

但是，流畅度仍然不是很好。为了实现一些漂亮和酷的东西，不要使用 AlpineJS 中的过渡属性和 x-show，而是使用 Transition 类并使用 Tailwind 中的 max-height。您在AlpineToolbox 中引用了一个很好的示例here。

【讨论】：

谢谢，您链接到的示例是我经过一些调整后所追求的。 ?