React+Tailwind手风琴组件文本跳动问题求助

问题场景 #

使用React和Tailwind开发手风琴组件时，触发展开/收起的过渡动画时，组件内的文本出现移位、跳动的异常情况。

相关代码如下：

<div className={`flex bg-grey gap-6 transition-all duration-500 ${open ? "h-auto p-6" : "h-0 p-0 overflow-hidden"}`}>
    <div className="flex flex-col w-1/2">
        <img src={project.image} alt={`${project.title} Image`} />
        <div className="flex flex-wrap justify-center gap-2 text-lg text-white">
            {project.tools.map((tool: string) => {
                return (
                    <div key={tool} className="bg-red px-2 py-1 my-2">
                        {tool}
                    </div>
                );
            })}
        </div>
    </div>
    <div className="flex flex-col w-1/2 text-xl text-white gap-4">
        <div className="flex flex-col bg-blue py-6">
            <p className="font-bold text-center">
                The What
            </p>
            <p className="text-justify text-lg px-6">
                {project.what}
            </p>
        </div>
        <div className="bg-blue py-6">
            <p className="font-bold text-center">
                The So What
            </p>
            <div className="text-justify text-lg px-6">
                <ul className="list-inside list-disc">
                    {project.soWhat.map((item: string) => {
                        return (
                            <li key={item}>
                                {item}
                            </li>
                        );
                    })}
                </ul>
            </div>
        </div>
    </div>
</div>

修复方案 #

1. 替换height过渡为max-height过渡 #

CSS无法对height: auto进行平滑过渡，这是导致跳动的核心原因之一。改用max-height模拟高度变化：

• 收起状态设置max-h-0，展开状态设置一个足够覆盖内容最大高度的值（比如max-h-[2000px]，可根据实际内容调整）
• 保留overflow-hidden，将过渡属性改为transition-max-height而非transition-all

2. 分离内边距变化逻辑 #

避免同时过渡内边距和高度，将p-6的内边距设置在始终存在的容器上，或者仅在展开时保留、收起时通过max-h-0裁掉内容，而非直接移除内边距。

3. 稳定内部元素布局 #

• 给图片添加固定宽高比（比如aspect-video）和object-cover，避免加载或过渡时尺寸变化
• 给列表项设置最小行高，防止文本换行导致的布局偏移

优化后的代码示例 #

<div className={`flex bg-grey gap-6 transition-max-height duration-500 ${open ? "max-h-[2000px] p-6" : "max-h-0 overflow-hidden p-0"}`}>
    <div className="flex flex-col w-1/2">
        <img src={project.image} alt={`${project.title} Image`} className="object-cover aspect-video w-full" />
        <div className="flex flex-wrap justify-center gap-2 text-lg text-white mt-4">
            {project.tools.map((tool: string) => {
                return (
                    <div key={tool} className="bg-red px-2 py-1 my-2">
                        {tool}
                    </div>
                );
            })}
        </div>
    </div>
    <div className="flex flex-col w-1/2 text-xl text-white gap-4">
        <div className="flex flex-col bg-blue py-6">
            <p className="font-bold text-center">
                The What
            </p>
            <p className="text-justify text-lg px-6">
                {project.what}
            </p>
        </div>
        <div className="bg-blue py-6">
            <p className="font-bold text-center">
                The So What
            </p>
            <div className="text-justify text-lg px-6">
                <ul className="list-inside list-disc space-y-2">
                    {project.soWhat.map((item: string) => {
                        return (
                            <li key={item} className="min-h-[1.5em]">
                                {item}
                            </li>
                        );
                    })}
                </ul>
            </div>
        </div>
    </div>
</div>

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