SOURCE

import React, { useRef, useState } from 'react';
import { useInterval } from 'ahooks';

function test() {
  const marqueeRef = useRef(null);
  const content = [
    '明月几时有',
    '把酒问青天',
    '不知天上宫阙',
    '今夕是何年',
  ];
  useInterval(() => {
    if (!marqueeRef || !marqueeRef.current) return;

    const { height } = marqueeRef.current.getBoundingClientRect();
    const translateYItem = Math.floor(height / (content.length + 1));
    const nextIndex = index + 1;
    marqueeRef.current.style.transform = `translateY(-${
      translateYItem * nextIndex
    }px)`;
    marqueeRef.current.style.transition = 'transform 1s';

    if (index >= content.length - 1) {
      // 最初一个
      setTimeout(() => {
        setIndex(0);
        marqueeRef.current.style.transform = 'translateY(0px)';
        marqueeRef.current.style.transition = 'transform 0s';
      }, 1000);
    } else {
      setIndex(nextIndex);
    }
  }, 2000);

  
  return (
    <div className="marquee-container">
      <div className="marquee-wrapper">
        <div className="marquee-content" ref={marqueeRef}>
          {
            content.concat(content[0]).map((itm, i) => (
              <div key={`${itm}-${i}`} className="marquee-content-itm">
                {itm}
              </div>
            ))
          }
        </div>
      </div>
    </div>
  );
}