Semantic UI React Transition Group animate first element

Question

Semantic's Transition.Group example shown here https://react.semantic-ui.com/modules/transition/#types-group only animates the bottom most element. How would I change it so the top most element gets animated instead.

If I press the add or subtract button in the example above the animation only applies to the last element in the list, how would I make it only animate the top most element. Or essentially make the selector opposite of default so it goes from top to bottom

Answer 1

If you read the sample code you realize all it does is to display a slice of the array based on the current length in the state. It appears to be appending / removing from the bottom because it's taking elements starting from the index 0. If you want to show it as if it's animating at the top, you just need to take the elements starting from the last element. For example, you can do this with reverse:

#8      state = { items: users.slice(0, 3).reverse() }

#10     handleAdd = () => this.setState({ items: users.slice(0, this.state.items.length + 1).reverse() })

#12      handleRemove = () => this.setState({ items: this.state.items.slice(1) })