How to make an animation of adding an element?

Question

React

Hello, my task is to implement an animated addition of a list item from top to bottom. There is a top panel with an input field and a button. The following is a list of elements from top to bottom. Elements are read through Redux

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

.
I add an element, store returns a new array and the array fires, everything is standard. I don't know how to make the new item appear smoothly by sliding the list. I understand that you need to do this through css3 animation, but how to do it through React + Redux ?

Answer 1

There is an animation in React ( React transition group ), which is based on ng-animate, which in turn was used in Angular. If you are familiar with it, then you will quickly move in, if not, you will probably have to re-read the dock a couple of times.
Bottom line: you add css classes like NAME-enter, NAME-enter-active and the like (everything is again on the link above), and in the react component you specify transitionName="NAME" inside ReactCSSTransitionGroup