react hooks数字滚动动画

js：

import { createElement, useRef } from 'rax';

import View from 'rax-view';

// css

import './index.css';

export default function Mod(props) {

const list = ['7', '6', '0', '5', '3'];

const textContainerRef = useRef();

const NumUnit = (num, index) => {

　　return (

　　　　setTimeout(() => {

　　　　　　const moveId = document.getElementById('move' + index);

　　　　　　moveId.innerHTML = '';

　　　　　　for (let i = 0; i <= num; i++) {

　　　　　　　　moveId.innerHTML += `<Text style="color:red;">${i}</Text>`;

　　　　}

　　　　　　if (textContainerRef?.current) {

　　　　　　　　let sum = 0;

　　　　　　　　const height = textContainerRef.current.offsetHeight;

　　　　　　　　setInterval(() => {

　　　　　　　　　　if (height * num == height * (sum - 1)) return;

　　　　　　　　　　moveId.style.marginTop = -(height * sum) + 'px';

　　　　　　　　　　moveId.style.transition = '0.3s';

　　　　　　　　　　sum += 1;

　　　　　　　　}, 100)

　　　　　　}

　　　　}, 0)

　　)

}

const ListView = () => {

　　return (

　　　　<View className="textBox">

　　　　{

　　　　　　list.map((item, index) => {

　　　　　　　　return (

　　　　　　　　　　<View className="textContainer" ref={textContainerRef}>

　　　　　　　　　　　　<View id={'move' + index}>

　　　　　　　　　　　　{

　　　　　　　　　　　　　　NumUnit(Number(item), index)

　　　　　　　　　　　　}

　　　　　　　　　　　　</View>

　　　　　　　　　　</View>

　　　　　　　　)

　　　　　　})

　　　　}

　　　　</View>

　　)

};

return (

　　<View className="mod">

　　　　<ListView />

　　</View>

　　);

}

 

css：

.textBox{

　　display: flex;

　　flex-direction: row;

}

.textContainer{

　　 30rpx;

　　height: 40rpx;

　　border: 1rpx solid red;

　　display: flex;

　　align-items: center;

　　line-height: 40rpx;

　　overflow: hidden;

}