reactjs 当显示更多按钮被点击然后隐藏的内容被正确地显示

vatpfxk5 于 2023-11-18 发布在 React

关注(0)|答案(2)|浏览(114)

我已经创建了一个网格的图像在一定高度的图像显示和其余被隐藏，当显示更多的按钮被点击，其余的图像被看到，但当显示更多的按钮被点击，图像出现更快，高度达到后，它可能是由于一些过渡错误，我无法弄清楚。

import React , {useState} from 'react'

function Show1() {
    const [isVisible,setIsVisible] = 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={`${isVisible ? 'max-h-52 overflow-hidden transition-all ease-in-out delay-1000 durat    ion-[2s] ': 'bg-red-400 max-h-[500px] transition-all ease-in-out delay-100 duration-[2s]'} grid grid-cols-4 gap-4 w-full  border-4`}>
            {data.map((val,i)=>{
                return <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={()=>setIsVisible(!isVisible)}
        className='px-5 py-2 bg-lime-300 my-6 w-fit'>
            Show more
        </button>
    </div>
  )
}

export default Show1

字符串

reactjs

来源：https://stackoverflow.com/questions/77447346/when-show-more-button-is-clicked-then-the-hidden-content-to-be-shown-properly

2条答案

按热度按时间

vkc1a9a21#

单击“显示更多”按钮时出现图像延迟的问题与transition-all属性中delay-1000类的使用有关。1000毫秒（1秒）的延迟值会导致在过渡开始之前出现延迟，这可能不是所需的行为。要解决此问题，必须将delay-100替换为持续时间500。

<div className='w-10/12 flex flex-col items-center justify-center bg-violet-500 mx-auto px-10'>
      <div
        className={`${
          isVisible
            ? 'max-h-52 overflow-hidden transition-all ease-in-out duration-500'
            : 'bg-red-400 max-h-[500px] transition-all ease-in-out duration-500'
        } grid grid-cols-4 gap-4 w-full border-4`}
      >
        {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={() => setIsVisible(!isVisible)}
        className='px-5 py-2 bg-lime-300 my-6 w-fit'
      >
        Show more
      </button>
    </div>

字符串

赞(0）回复(0）举报 2023-11-18

csga3l582#

当我改变我的溢出属性剪辑它开始工作

赞(0）回复(0）举报 2023-11-18