无干扰的 Tailwind / Alpine.js 手风琴

Question

我正在研究使用 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>

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

Answer 1

编辑于 2022-01-06

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

原回答

有关平滑度的主要问题与 mb-6 不过渡有关。下面提出了一个快速修复方法（使用 mt-6 作为 child）。

<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，而是使用过渡 class 并使用 Tailwind 中的 max-height。你有一个很好的例子 here referenced in AlpineToolbox.

无干扰的 Tailwind / Alpine.js 手风琴

Jank-free Tailwind / Alpine.js accordion

tailwind-css

alpine.js

编辑于 2022-01-06

原回答