How to smoothly delete a block?

Question

React

There is a container, it has 3 blocks that render the this.state.users array,
I click on the button and one of the blocks is removed (disappears from the state)
how to make it disappear smoothly and not instantly?
I understand that there are all sorts of plugins, but I can’t understand how these plugins work under the hood?

Answer 1

deletion should take place in 2 stages:
1. mark the element to be deleted with a special flag "isDeleted" (in this state, you start the disappearance animation using css)
2. at the end of the animation, delete the element from the state completely

...
onDeleteItem(index) {
  const users = this.state.users;
  users[index].isDeteted = true;
  this.setState({
    users,
  });
  setTimeout(() => {
    users.splice(index, 1);
    this.setState({
      users,
    });
  }, 300);
}
...
{this.state.users.map((user, index) => (
  <UserItem 
    className={user.isDeteted ? 'class-for-deleted' : ''} 
    onDelete={this.onDeleteItem.bind(this, index)} 
  />
))}
...

senior level: this mechanism has an asynchronous state change, therefore, for a stable code, it is necessary to add a check that the removal process has ended (so that there are no collisions between several quick "delete" clicks), as well as the existence of the current component (that it has not been unmounted from dom-tree)

Answer 2

By clicking on the block, first remove it using css with some kind of smooth animation, and then immediately remove it from the state