跑马灯简单版

背景

跑马灯对前端来说，再常见不过了，市面上也有很多封装好的插件，但是对于一些简单效果，总觉得是杀鸡用牛刀。项目中正好遇到了，决定自己实现一个简洁版的，先看下效果：

实现原理

主要操作就是：在滚动到最后一个数字时，快速的回滚到第一个，这样才能实现循环的滚动。

实现逻辑：通过控制translateY来实现元素的滚动，通过transitionDuration来控制滚动时间。

在快速切换为第一个时，把transitionDuration设置0，这样就看不出元素被快速切换了。切换为第一个后，再把动画时间周期设置为原来的值就可以了。

import React, { FC, useEffect, useMemo, useState } from 'react';
import './index.less';

const list = [
  '00000000000',
  '11111111111',
  '22222222222',
  '333333333',
];
const transitionDuration = 0.3;
const ScrollText: FC = () => {
  const endList = [...list, list[0]];
  const [index, setIndex] = useState(0);
  const [time, setTime] = useState(transitionDuration);
  const translateY = useMemo(() => {
    if (time === 0 && index === endList.length - 1) {
      return 0;
    }
    return -index * 30;
  }, [index, time]);
  useEffect(() => {
    const timeId = setInterval(() => {
      const nextIndex = (index + 1) % endList.length;
      setIndex(nextIndex === 0 ? 1 : nextIndex);
      setTime(transitionDuration);
    }, 2000);
    return () => {
      clearInterval(timeId);
    };
  }, [index]);
  return (
    <div className="scrollTextContainer">
      <div
        className="list"
        style={{ transform: `translateY(${translateY}px)`, transitionDuration: `${time}s` }}
        onTransitionEnd={() => {
          if (index === endList.length - 1) {
            setTime(0);
          }
        }}
      >
        {endList.map((item: string, index: number) => (
          <span key={index}>{item}</span>
        ))}
      </div>
    </div>
  );
};
export default ScrollText;