Анимация обратного отсчета начинается сразу после загрузки страницы, должна начинаться при прокрутке к компоненту (без jquery)

Question

У меня есть одностраничное приложение с несколькими компонентами. Для 5-го компонента (виден только при прокрутке вниз) у меня есть счетчик. Теперь я использую библиотеку реагирования-подсчета для достижения функции счетчика. Однако счетчик запускается вскоре после загрузки страницы. Можно ли начать отсчет после прокрутки вниз к компоненту. Анимация происходит только один раз (что хорошо) после загрузки страницы, но я бы хотел, чтобы счетчик запускался не сразу после загрузки страницы, а когда пользователь прокручивает компонент до первого раза. Мой код выглядит так:

    render() {
         return (
         <div className={style.componentName}>
         <h2>Heading</h2>
         <div className={style.col}>
         <div>My counter</div>
         <CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3} />
        </div>
        </div>)}

Обновленный код:

    import CountUp, { startAnimation } from 'react-countup';
    import VisibilitySensor from 'react-visibility-sensor';

    class className extends Component {

        state = {
            scrollStatus: true
        };


        onVisibilityChange = isVisible => {
            if (isVisible) {
                if (this.state.scrollStatus) {
                    startAnimation(this.myCountUp);
                    this.setState({ scrollStatus: false });
                }
            }
        }
    render() {
             return (
            <div className={style.componentName}>
             <h2>Heading</h2>
             <VisibilitySensor onChange={this.onVisibilityChange} offset = {{ top: 
              10}} delayedCall>
             <CountUp className={style.countup} decimals={1} start={0} end={25} 
             suffix=" %" duration={3} ref={countUp => { this.myCountUp= countUp;}}/>
             </VisibilitySensor>
            </div>)}
}

Answer 1

Per React CountUp README , вы можете использовать хук startAnimation, чтобы вручную запустить анимацию. Добавьте к этому что-то вроде реагирующий-видимость-датчик , и вы можете подождать, чтобы запустить анимацию, пока она не появится в браузере пользователя.

import React, {Component} from 'react';
import CountUp, {startAnimation} from 'react-countup';
import './App.css';
import VisibilitySensor from 'react-visibility-sensor';

const style = {
  componentName: {},
  col: {},
  countup: {},
};

class App extends Component {
  constructor(props) {
    super(props);
    this.onVisibilityChange = this.onVisibilityChange.bind(this); // Bind for appropriate 'this' context
  }

  onVisibilityChange(isVisible) {
    if (isVisible) {
      startAnimation(this.myCountUp);
    }
  }

  render() {
    return (
      <div className={style.componentName}>
        <h2>Heading</h2>
        <div className={style.col}>
          <div>My counter</div>
          <VisibilitySensor
            onChange={this.onVisibilityChange}
            delayedCall // Prevents react apps triggering elements as visible before styles are loaded
          >
            <CountUp className={style.countup} decimals={1} start={0} end={25} suffix=" %" duration={3}
                     ref={countUp => { this.myCountUp = countUp; }} // From react-countup README 
            />
          </VisibilitySensor>
        </div>
      </div>
    );
  }
}

export default App;

Как есть, он будет startAnimation каждый раз, когда вы прокручиваете счет. Если вы хотите сделать это только один раз, просто добавьте часть состояния, которая устанавливается после первого рендеринга (и затем не позволяйте ей делать startAnimation снова на основе этого измененного состояния).

Менее элегантные (не рекомендуемые) способы достижения того же эффекта могут включать:

• Используйте встроенные триггеры анимации (то есть меняя реквизиты duration, end, start), устанавливая их равными некоторому состоянию, которое изменяется при прокрутке пользователем вниз
• Использование реквизита onStart, вызываемого до запуска анимации, для задержки запуска анимации до тех пор, пока пользователь не прокрутит вниз

РЕДАКТИРОВАТЬ: обновить, чтобы ответить на ваш второй вопрос

К сожалению, похоже, что библиотека react-countup не предоставляет способ предотвратить startAnimation при запуске.

Но мы можем взломать довольно элегантное исправление, манипулируя вместо этого end, используя состояние:

import React, {Component} from 'react';
import CountUp, {startAnimation} from 'react-countup';
import './App.css';
import VisibilitySensor from 'react-visibility-sensor';

const style = {
  componentName: {},
  col: {},
  countup: {},
};

class App extends Component {
  state = {
    didViewCountUp: false
  };


  onVisibilityChange = isVisible => {
    if (isVisible) {
      this.setState({didViewCountUp: true});
    }
  }

  render() {
    return (
      <div className={style.componentName}>
        <h2 style={{fontSize: '40em'}}>Heading</h2>
        <VisibilitySensor onChange={this.onVisibilityChange} offset={{
          top:
            10
        }} delayedCall>
          <CountUp className={style.countup} decimals={1} start={0} end={this.state.didViewCountUp ? 25 : 0}
                   suffix=" %" duration={3} />
        </VisibilitySensor>
      </div>)
  }
}

export default App;

Answer 2

Документы для этой библиотеки имеют возможность вручную запустить счетчик. Я бы использовал этот подход, чтобы запустить счетчик, как только пользователь прокрутит до нужного расстояния.

import React, { Component } from 'react';
import CountUp, { startAnimation } from 'react-countup';

const MyComponent = () => (
  <div>
    <CountUp className="CountUp" start={0} end={100} duration={3} ref={(countUp) => {
      this.myCountUp = countUp;
    }} />
    <button className="Button" onClick={(event) => {
      startAnimation(this.myCountUp);
    }}>Count me up!</button>
  </div>
);

export default App;

Ссылка на Github . Прочитайте README в самом низу.