ReactJs, останавливать анимацию каждый раз, когда меняется реквизит - PullRequest
Новая
       9

ReactJs, останавливать анимацию каждый раз, когда меняется реквизит

0 голосов
/ 18 октября 2019
  • У меня есть часы, которые работают в течение заданного пользователем времени.
  • Часы отсчитывают до нуля.
  • У меня есть анимация CSS, которая заполняет <div>, когда часы идут в обратном порядке. Показывает, сколько времени прошло / осталось

Проблема в том, что анимация перезапускается КАЖДЫЙ раз, когда обновляются часы. Таким образом, анимация не превышает продолжительность, установленную пользователем. Я не могу понять, где поставить код? 

  runTimer = (timerType) => {
    const node = this.myRef.current; // references a div in the html
    let animation;
    const keyFrames = [{ height: '0' }, { height: '100%' }];
    const timing = {
      easing: 'cubic-bezier(.2,.6,.8,.4)',
      duration: 25 * 1000,
      delay: 1000
    }

    if (timerType === "session") {
      timing.duration = this.props.state.userSetSession; // for example 1200 (20 mins)
      animation = node.animate(keyFrames, timing);
      this.props.run(sType) // calls redux function to reduce session by 1
      ...
...