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{
width: 30rpx;
height: 40rpx;
border: 1rpx solid red;
display: flex;
align-items: center;
line-height: 40rpx;
overflow: hidden;
}
