数字变化效果

npm install react-countup --save
 
import React from 'react'
import CountUp from "react-countup";
export default function index() {
  return (
    <div>
      <CountUp start={3} end={20.98} duration={2} />
    </div>
  )
}
 
 
 
import React, { useState, useRef, useEffect } from 'react';
export const useTime=(goal: number) =>{
  const [count, setCount] = useState(0);
  const initialized = useRef(false);
  const callFc = (_count: number) => {
    const timer = setTimeout(() => {
      setCount((v) => ++v);
      clearTimeout(timer);
      if (_count + 1 < goal) callFc(_count + 1);
    }, 100);
  };
  useEffect(() => {
    if (!initialized.current) {
      initialized.current = true;
      console.log(initialized);
      callFc(count);
    }
  }, []);
  return {count};
}
 
import React from 'react'
import {useTime} from './useCountUp'
export default function Index() {
  const {count}= useTime(31)
  return (
    <div>{count}</div>
  )
}
 
css实现
.wrap{
  height: 200px;
  border: 1px solid red ;
}
 
  @keyframes count {
   to {
     --t: 70
   }
  }
  .wrap:hover .like::after{
  /**/
  --t:0;
  counter-reset: time var(--t);
  content: counter(time);
  animation: count 1s steps(44) forwards;
  }
  @property --t {
   syntax: '<integer>';
   inherits: false;
   initial-value: 10;
  }
 .like::after{
    --t:70;
    transition: .3s all;
  counter-reset: time var(--t);
   content: counter(time);
   width: max-content;
   font-size: 2rem;
   font-style: italic;
   font-weight: bolder;
  }