Как воспроизвести CSS3-анимацию в Reactjs - PullRequest
Новая
       8

Как воспроизвести CSS3-анимацию в Reactjs

0 голосов
/ 08 сентября 2018

Я установил анимацию в файле CSS: 

 @-webkit-keyframes jello-horizontal{
    0%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    30%{
        -webkit-transform:scale3d(1.25,.75,1);
        transform:scale3d(1.25,.75,1)
    }
    40%{
        -webkit-transform:scale3d(.75,1.25,1);
        transform:scale3d(.75,1.25,1)
    }
    50%{
        -webkit-transform:scale3d(1.15,.85,1);
        transform:scale3d(1.15,.85,1)
    }
    65%{
        -webkit-transform:scale3d(.95,1.05,1);
        transform:scale3d(.95,1.05,1)
    }
    75%{
        -webkit-transform:scale3d(1.05,.95,1);
        transform:scale3d(1.05,.95,1)
    }
    100%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
@keyframes jello-horizontal{
    0%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    30%{
        -webkit-transform:scale3d(1.25,.75,1);
        transform:scale3d(1.25,.75,1)
    }
    40%{
        -webkit-transform:scale3d(.75,1.25,1);
        transform:scale3d(.75,1.25,1)
    }
    50%{
        -webkit-transform:scale3d(1.15,.85,1);
        transform:scale3d(1.15,.85,1)
    }
    65%{
        -webkit-transform:scale3d(.95,1.05,1);
        transform:scale3d(.95,1.05,1)
    }
    75%{
        -webkit-transform:scale3d(1.05,.95,1);
        transform:scale3d(1.05,.95,1)
    }
    100%{
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
 .jello-horizontal{
    -webkit-animation:jello-horizontal .9s both;
    animation:jello-horizontal .9s both
}

Он отлично работает при первой загрузке mycomponent, но как мне загружать компонент каждый раз, когда я нажимаю определенную кнопку?

Мой компонент довольно сложный и может добавлять код здесь, но я не думаю, что это необходимо, поскольку мне просто нужен пример того, как запустить анимацию при нажатии кнопки. Не уверен, что это вообще возможно. Кнопка, которую я нажимаю, обновит часть состояния. Вот пример упрощенной версии компонента: 

import React, {Component} from 'react';

export class Cards extends Component {
  constructor() {
    super();
    this.state = {
      flashCardIndex: 0,
      cards: [],
      currentCard: undefined,
      rightActive: true,
      leftActive: true,
      cardError: false,
      nowPlaying: false,
      showLoader: false,
      animateCard: true,
    };

    render() {
       return (<div className="flash-card jello-horizontal">
                  <a href="">Run animation</a>
              </div>)
    }    
}

1 Ответ

0 голосов
/ 08 сентября 2018

ReactJS использует атрибут key, чтобы различать элементы в алгоритме различий. Итак, когда ваш компонент загружается в первый раз, реагирует, принимает его как новый элемент и отображает его соответственно. Но в следующий раз он пытается отобразить один и тот же элемент с другими данными, реагируя, чувствует, что он имеет ту же структуру и заменяет только новые данные на старые.

Таким образом, чтобы применить анимацию к каждому изменению, мы должны сказать реагировать, что это новый компонент. Это можно сделать, предоставив key элементу с вашим классом анимации. И ключ может быть сгенерирован случайным образом с использованием любого генератора случайных чисел (я обычно использую shortid).

Для рабочего примера, пожалуйста, обратитесь: это

...