我已经创建了一个网格的图像在一定高度的图像显示和其余被隐藏,当显示更多的按钮被点击,其余的图像被看到,但当显示更多的按钮被点击,图像出现更快,高度达到后,它可能是由于一些过渡错误,我无法弄清楚。
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
字符串
2条答案
按热度按时间vkc1a9a21#
单击“显示更多”按钮时出现图像延迟的问题与transition-all属性中delay-1000类的使用有关。1000毫秒(1秒)的延迟值会导致在过渡开始之前出现延迟,这可能不是所需的行为。要解决此问题,必须将delay-100替换为持续时间500。
字符串
csga3l582#
当我改变我的溢出属性剪辑它开始工作