react滚动屏

 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);
}

　　

  const [animateUp, setAnimateUp] = useState<any>(false);
  const [timer, setTimer] = useState<any>(null);
  const [animaStatus, setAnimaStatus] = useState<any>(true);
  const scrollAnimate = () => {
    if (animaStatus === true) {
      console.log("rowsdata",rowsdata,rows);
      setAnimateUp(true);
      setTimeout(() => {
        if (rowsdata?.length>0) {
          rowsdata.push(rowsdata[0]);
          rowsdata.shift();  
          setRows(rowsdata); 
          setAnimateUp(false);
        }
      }, 500);
    }
  };
  useEffect(() => {
    setTimer(setInterval(scrollAnimate, 1500));
    clearInterval(timer);
  }, [animateUp, animaStatus]);