react滾動屏

zjxgdq發表於2024-08-21
 const [animateUp, setAnimateUp] = useState<any>(false)
  const [timer, setTimer] = useState<any>(null)
  const scrollAnimate = () => {
    setAnimateUp(true)
    setTimeout(() => {
      rows.push(rows[0])
      rows.shift();
      setRows(rows);
      setAnimateUp(false)
    }, 500)
  }
  useEffect(() => {
    setTimer(setInterval(scrollAnimate, 1500))
    clearInterval(timer)
  }, [animateUp])
className={`row ${animateUp?"animate-up":""}`
.animate-up {
  transition: all 0.5s ease-in-out;
  transform: translateY(-45px);
}

  

相關文章