Здравствуйте.
Делаю чат на
react/redux. На странице получаю из
redux массив со всеми диалогами и циклом рисую для каждого из них кнопку открытия.
Нужно добавить анимацию на открытие каждого диалога.
Для этого в я
reducer открываемому диалогу добавляю поле
animate = true;
И при рендере страницы проверяю, если это поле true, тогда добавляю к элементу класс
dialog_animate
Вот код компонента:
class PageDialogs extends Component {
sortDialogs(dialogs){
return dialogs.sort(function(a, b){
if (a.openedAt < b.openedAt) {
return -1;
}
else if (a.openedAt > b.openedAt) {
return 1;
}
else {
return 0;
}
});
}
showDialogs(){
return this.props.dialogs.map(function(dialog, key){
if (dialog.active) {
return (
<div key={key} className={dialog.animate ? 'dialog_animate' : ''} >
<Dialog dialog={dialog} />
</div>
);
}
})
}
render() {
if (typeof this.props.dialogs !== 'undefined') {
return (
<div>
<div className='page-dialogs'>
{this.showDialogs()}
</div>
</div>
);
}
else {
return (
<div>
<Preloader />
</div>
)
}
}
}
И на всякий случай стили класса :)
.dialog_animate {
animation: dialog_animate 5s ease-in-out forwards;
-webkit-animation: dialog_animate 5s ease-in-out forwards;
}
В таком виде анимация работает. Но мне необходимо
this.props.dialogs для начала отсортировать. И вот если
this.props.dialogs заменю на
this.sortDialogs(this.props.dialogs) тогда начинаются странности. Тогда анимация начинает работать только 1 раз. И не в смысле что только для первого объекта, а именно один раз. Тоесть если я в течении 5 сек которые длится анимация открою несколько чатов, то анимация на первом начнется и на последнем закончится, а на последующих ее уже не будет.
Сразу скажу что класс
dialog_animate для чатов добавляется правильно, для открываемого добавляется, а у всех остальных убирается.
Подскажите в чем может быть причина и как это можно исправить?
Спасибо.
Средний
