React图片网格展开过渡不同步问题求助

核心问题 #

1. 状态与样式映射颠倒：初始isVisible=false时应用的是max-h-[500px]（显示更多），点击后isVisible=true反而设为max-h-52（隐藏），完全和需求逻辑相反。
2. 过渡时机不同步：展开/收起时分别设置了delay-1000和delay-100，导致容器高度变化延迟，而图片因overflow属性变化直接显示，出现视觉脱节。
3. 固定高度限制：展开时用固定max-h-[500px]，若内容高度超过这个值仍会被截断，无法完全展示所有内容。

修复后的代码 #

import React, { useState } from 'react'

function Show1() {
    const [isExpanded, setIsExpanded] = useState(false)
    const data = [
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
        {name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
    ]

    return (
        <div className='w-10/12 flex flex-col items-center justify-center bg-violet-500 mx-auto px-10'>
            <div className={`
                grid grid-cols-4 gap-4 w-full border-4
                ${isExpanded ? 'max-h-none' : 'max-h-52 overflow-hidden'}
                transition-max-h ease-in-out duration-[2s]
            `}>
                {data.map((val, i) => (
                    <div key={i} className='w-full h-52'>
                        <div 
                            className='w-full h-full' 
                            style={{
                                backgroundImage: `url(${val.name})`,
                                backgroundPosition: "center",
                                backgroundRepeat: "no-repeat",
                                backgroundSize: "cover"
                            }}
                        ></div>
                    </div>
                ))}
            </div>
            <button 
                onClick={() => setIsExpanded(!isExpanded)}
                className='px-5 py-2 bg-lime-300 my-6 w-fit'>
                {isExpanded ? 'Show less' : 'Show more'}
            </button>
        </div>
    )
}

export default Show1

关键优化点 #

• 修正状态逻辑：初始isExpanded=false时应用max-h-52 overflow-hidden隐藏超出内容，点击后isExpanded=true设为max-h-none完全展示所有内容。
• 同步过渡效果：移除不必要的延迟设置，只针对max-h属性做过渡，避免无关属性过渡导致的视觉异常。
• 动态按钮文本：根据展开状态切换按钮显示文本，提升交互体验。
• 语义化状态命名：将isVisible改为isExpanded，更贴合功能逻辑。

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