Я установил свою анимацию в свой файл 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>)
}
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


ReactJS использует атрибут key, чтобы различать элементы в алгоритме сравнения. Итак, при первой загрузке компонента react принимает его как новый элемент и соответствующим образом отображает. Но в следующий раз, когда он попытается отобразить тот же элемент с другими данными, React чувствует, что он имеет ту же структуру и только заменяет новые данные старыми данными.
Итак, чтобы применять анимацию для каждого изменения, нам нужно сообщить React, что это новый компонент. Это можно сделать, предоставив key элементу с классом анимации. И ключ может быть сгенерирован случайным образом с использованием любого генератора случайных чисел (я обычно использую shortid).
Для рабочего примера см .: это
если вы ищете альтернативу shortid, я рекомендую +new Date(): <div key = {+ new Date ()}> content </div> `
@Marcin ты герой! Это идеально!
Супер чисто и просто. Огромное спасибо!