要闻：跑马灯简单版

【资料图】

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

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

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

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

importReact,{FC,useEffect,useMemo,useState}from"react";import"./index.less";constlist=["00000000000","11111111111","22222222222","333333333",];consttransitionDuration=0.3;constScrollText:FC=()=>{constendList=[...list,list[0]];const[index,setIndex]=useState(0);const[time,setTime]=useState(transitionDuration);consttranslateY=useMemo(()=>{if(time===0&&index===endList.length-1){return0;}return-index*30;},[index,time]);useEffect(()=>{consttimeId=setInterval(()=>{constnextIndex=(index+1)%endList.length;setIndex(nextIndex===0?1:nextIndex);setTime(transitionDuration);},2000);return()=>{clearInterval(timeId);};},[index]);return({if(index===endList.length-1){setTime(0);}}}>{endList.map((item:string,index:number)=>({item}))}