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;
    }
  • 相关阅读:
    MySQL学习——SQL查询语句(连接查询&子查询)(三)
    MySQL学习——SQL查询语句(使用集合函数查询)(二)
    MySQL学习——SQL查询语句(一)
    MySQL学习——操作数据库(增删改查)(二)
    MySQL学习——操作数据库(增删改查)(一)
    MySQL学习——MySQL数据库概述与基础
    Python学习之——Http协议简介
    Python学习之——Socket套接字(UDP连接)
    第04组 Beta版本演示
    第04组 Beta冲刺(4/5)
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/15393574.html
Copyright © 2011-2022 走看看