Анимация Lottie начинает воспроизводиться при нажатии на слой, который ее содержит, как это остановить?

У меня есть анимация lottie, которую я запускаю из родительского компонента, проблема в том, что по какой-то причине весь слой компонента lottie является интерактивным и запускает анимацию.

Это код, который я использую:

constructor(props) {
    super(props);
    this.state = {
      isStopped: true,
      isPaused: false,
      Animated: 0,
    };
    this.defaultOptions = {
      loop: false,
      autoplay: false,
      animationData: animationData
    };
  }

  clickHandler = () => {
    this.setState({ 
        isStopped: false,
        Animated: 0
    });
    console.log("clicked");
  };

  render() {
    return (
      <div id="ethdrop">
        <Lottie
          className='animation-class'
          options={this.defaultOptions}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
          Animated={this.state.Animated}  
        />
    </div>
    );
  }

Вот как выглядит доменное имя: снимок экрана моего инспектора элементов

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


reactjs lottie
person jasper    schedule 24.09.2018    source источник
comment
Что должно вызывать clickHandler ()?   -  person vitomadio    schedule 24.09.2018
comment
Нажатие кнопки в другом компоненте работает нормально.   -  person jasper    schedule 24.09.2018

Ответы (2)


arrow_upward
13
arrow_downward

Есть недокументированное свойство: isClickToPauseDisabled. Если для этого параметра установлено значение false (значение по умолчанию), вы можете приостановить и возобновить анимацию, щелкнув по ней. Если вы не хотите, чтобы это происходило, установите для этого свойства значение true.

Пример:

<Lottie options={this.defaultOptions}
    ...
    isClickToPauseDisabled={true} 
/>

Ссылка: https://github.com/chenqingspring/react-lottie/pull/54

person Ignacio Segura    schedule 30.11.2018
comment
Это безумие, решено с помощью гигантского прозрачного div поверх анимации. Что, конечно, намного хитрее, чем ваше решение. Спасибо - person jasper; 02.12.2018

arrow_upward
0
arrow_downward

Сделайте это изменение в своем clickHandler:

clickHandler = (e) => {
    e.preventDefault()
     this.setState({ 
        isStopped: false,
        Animated: 0
     }); 
    console.log("clicked"); 
};

Надеюсь, это поможет.

person vitomadio    schedule 24.09.2018