@webe

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

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

как сделать так что бы он пропал плавно а не моментально?
понимаю что есть всякие плагины, но не могу понять как эти плагины работают подж капотом?
  • Вопрос задан
  • 53 просмотра
Решения вопроса 1
usyninis
@usyninis
web-разработчик
удаление должно проходить в 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
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Ultimate Guitar Калининград
от 1 000 до 5 000 usd.
Spar-online Нижний Новгород
от 150 000 до 170 000 руб.
Enapter Санкт-Петербург
от 160 001 руб.
20 янв. 2019, в 00:12
16000 руб./за проект
19 янв. 2019, в 23:33
110000 руб./за проект