@webe

Как плавно удалить блок?

Есть контейнер, в нем есть 3 блока которые рендерят массив this.state.users
дулаю клик по кнопке и один из блоков удаляется (пропадает из state)

как сделать так что бы он пропал плавно а не моментально?
понимаю что есть всякие плагины, но не могу понять как эти плагины работают подж капотом?
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
usyninis
@usyninis
react-эксперт
удаление должно проходить в 2 этапа:

1. помечаешь удаляемый элемент спец флагом "isDeleted" (в этом состоянии средствами css запускаешь анимацию исчезновения)
2. по окончании анимации удаляешь элемент из state полностью

...
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: в данном механизме асинхронное изменение state, поэтому для стабильно работающего кода необходимо добавить проверку, что процесс удаления закончился (чтобы не было коллизий между несколькими быстрыми кликами "удалить"), а так же на существование текущего компонента (что он не размонтировался из dom-дерева)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
tsepen
@tsepen
Фронтенд разработчик React & Redux
По клику на блок сначала удалить его средствами css с какой нибудь анимацией плавной, а затем сразу удалить из state
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Indacoin Москва
от 80 000 до 160 000 руб.
Acme Crypto Corp Нижний Новгород
от 120 000 до 200 000 руб.
19 марта 2019, в 10:33
20000 руб./за проект
19 марта 2019, в 10:19
500 руб./за проект