Как мне заставить число быстро расти с нуля при рендеринге страницы в React. js?

Question

Пример того, что я хочу: https://www.activate1m1b.org/

Я хочу добавить на свой веб-сайт раздел, который показывает количество людей, охваченных сайтом, но я хочу, чтобы это число начни с нуля и быстро увеличивайся до нужного мне числа (как показано в примере сайта). Я использую React. js, и я не уверен, будет ли это функция CSS или что-то, что мне придется закодировать в JS. Есть идеи?

Answer 1

вы можете использовать такую ​​функцию тайм-аута.

count = params => {
    let count = this.state.counter;
    setTimeout(() => {
      this.setState({
        counter: count + 1
      });
      if (this.state.counter === this.state.length) return;
      this.count();
    }, 100);
  };
  componentDidMount() {
    this.count();
  }

вот рабочая демонстрация: https://codesandbox.io/s/react-basic-class-component-gu1z0?file= / src / index. js

Answer 2

Вы можете использовать response-countup :

<CountUp start={0} end={100} duration={2.5} delay={1} />

В приведенном выше примере будет отображаться счетчик от 0 до 100 через 2.5 секунд после начальной задержки в 1 секунда. Проверьте docs и demo , чтобы узнать больше о его свойствах и использовании.