zoukankan      html  css  js  c++  java
  • 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;
    }
  • 相关阅读:
    第15周作业
    迟到的第14周作业
    第13周作业集
    第11次作业--字符串处理
    找回感觉的练习
    第9次作业--接口及接口回调
    20194684 + 自动生成四则运算题第一版报告
    css的calc在less文件中计算有误问题
    react 细节整理
    js async属性
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/15393574.html
Copyright © 2011-2022 走看看