Tailwind/Alpine.js手风琴过渡卡顿问题咨询，求无卡顿优化方案

你当前的卡顿核心原因是Alpine.js 2.x默认的transition指令仅处理透明度和缩放变换，没有适配手风琴必需的高度过渡，同时标题动态边距和过渡动画不同步也会加剧跳动感，可通过以下技巧优化：

• 改用max-height模拟高度过渡：CSS原生不支持height: auto的过渡动画，设置一个远大于内容最大高度的max-height值作为过渡目标，配合overflow: hidden即可实现平滑的展开收起效果
• 全属性同步过渡：将透明度、高度、外边距所有切换时会变化的属性都纳入过渡范围，避免不同属性切换不同步导致的布局跳动
• 移除标题动态边距：把原本加在标题上的动态mb-6改为加在内容容器的顶部边距，让边距跟随内容一起参与过渡，消除标题区域的突兀跳动
• 开启GPU加速：给过渡元素添加transform-gpu类（对应规则transform: translateZ(0)），调用GPU渲染过渡动画，减少页面重绘带来的卡顿
• 适配缓动函数：展开阶段用ease-out、收起阶段用ease-in的缓动配置，更符合真实物理运动的手感，过渡效果更自然

优化后完整代码 #

<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>
<!-- 非JIT模式下可提前添加这个自定义类 -->
<style>
.max-h-999 {
    max-height: 999px;
}
</style>
<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-0">
            <button class="text-left" type="button" @click="isOpen = !isOpen">
            Heading 1
            </button>
        </h3>
        <div 
            x-show="isOpen"
            @click.away="isOpen = false"
            x-transition:enter="transition-all duration-300 ease-out transform-gpu"
            x-transition:enter-start="opacity-0 max-h-0 mt-0"
            x-transition:enter-end="opacity-100 max-h-999 mt-6"
            x-transition:leave="transition-all duration-300 ease-in transform-gpu"
            x-transition:leave-start="opacity-100 max-h-999 mt-6"
            x-transition:leave-end="opacity-0 max-h-0 mt-0"
            class="overflow-hidden"
        >
            <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-0">
            <button class="text-left" type="button" @click="isOpen = !isOpen">
            Heading 2
            </button>
        </h3>
        <div 
            x-show="isOpen"
            @click.away="isOpen = false"
            x-transition:enter="transition-all duration-300 ease-out transform-gpu"
            x-transition:enter-start="opacity-0 max-h-0 mt-0"
            x-transition:enter-end="opacity-100 max-h-999 mt-6"
            x-transition:leave="transition-all duration-300 ease-in transform-gpu"
            x-transition:leave-start="opacity-100 max-h-999 mt-6"
            x-transition:leave-end="opacity-0 max-h-0 mt-0"
            class="overflow-hidden"
        >
            <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>

注意事项 #

max-height的取值不要远超实际内容的最大高度，否则会出现过渡时长和内容高度不匹配的违和感，比如内容最高只有300px，设置500px的max-height即可。

内容的提问来源于stack exchange，提问作者Tyssen