Как сделать анимацию добавления элемента?

Question

[symblight]

Здравствуйте, моя задача реализовать анимированное добавление элемента списка сверху вниз. Имеется верхняя панель с полем ввода и кнопкой. Далее идет список элементов сверху вниз. Элементы считываются через Redux

this.props.testStore.posts.map(el=>
<Post
key={el.id}
text={el.text}
/>
)

.
Добавляю элемент, store возвращается новый массив и срабатывает массив, все по стандартному. Я не знаю как реализовать, чтобы новый элемент плавно появился сдвинув список. Понимаю что нужно это делать через css3 анимацию, но а как это сделать через React+Redux?

Answer 1

[Максим]

Есть анимация в реакте ( React transition group ), которая сделана на основе ng-animate, которая в свою очередь использовалась в ангуляре. Если с ней знакомы, то быстро въедете, если нет - придется, наверное, пару раз перечитать доку.

Суть: вы добавляете css классы по типу NAME-enter, NAME-enter-active и подобное (все опять же есть по ссылке выше), а в реакт компоненте указываете внутри ReactCSSTransitionGroup transitionName="NAME"