css 如何修复顺风过渡不工作?[已关闭]

jjhzyzn0  于 2022-12-24  发布在  其他
关注(0)|答案(1)|浏览(149)

已关闭。此问题需要details or clarity。当前不接受答案。
**想要改进此问题?**添加详细信息并通过editing this post阐明问题。

3天前关闭。
Improve this question
你可以看到下面,我写了错误的顺风类过渡?

const isNotActiveStyle = "flex items-center px-5 gap-3 text-gray-500 hover:text-black transition-all duration-200 ease-in-out";
const isActiveStyle = "flex items-center px-5 gap-3 font-extrabold border-r-2 border-black transition-all duration-200 ease-in-out";
h79rfbju

h79rfbju1#

这是一个过渡的例子,我用tailwind + nextjs做了这个滑块

<main className='w-full h-screen p-36 bg-gray-800'>
    <div className='transition-all relative h-full p-3 rounded-2xl mx-auto mt-3 bg-cover bg-no-repeat bg-center' style={{ backgroundImage: `url(${images[currentImg].url})` }}>
      <span className='cursor-pointer absolute top-1/2 left-0 -translate-y-1/2 ml-4' onClick={handlePrev}>PREV</span>
      <span className='cursor-pointer absolute top-1/2 right-0 -translate-y-1/2 mr-4 ' onClick={handleNext}>NEXT</span>
    </div>
  </main>

  const images = [
    { url: "./first.png" }, { url: "./second.png" }, { url: "./third.png" }, { url: "./fourth.png" }
  ]
  const [currentImg, setCurrentImg] = useState(0)

  const handleNext = () => {
    const isLast = currentImg === images.length - 1
    isLast ? setCurrentImg(0) : setCurrentImg(prev => prev + 1)
  }
  const handlePrev = () => {
    const isFinished = currentImg === 0
    isFinished ? setCurrentImg(images.length - 1) : setCurrentImg(prev => prev - 1)
  }

images数组是填充了包含图像URL的对象的数组

相关问题