Как сбрасывать классы при setState() в React?

Question

[s24344]

Ребята, подскажите, пожалуйста, ответ на следующий вопрос. У меня есть следующая логика:
Я вызываю событие при click на button. На первый и второй элемент списка я вызываю анимацию (добавляю классы). После их добавления, я делаю setState() и переформирую исходный массив, и снова го рендерю. Мне необходимо, чтобы при этом классов уже небыло. Если сделать remove, то они анимировано удаляться, что мне не нужно.
https://codepen.io/gsdev99/pen/qvLerP
Идея анимации в том, чтобы первый элемент ушел в opacity. А соседи встали на его место (анимировано).
Фактически мне нужно, чтобы next работал также как и prev.

Answer 1

[hzzzzl]

точно хочется применять классы к ячейкам, а не двигать весь контейнер?
https://codepen.io/anon/pen/gEqYgp
не "зациклено", но как-то наверняка можно и зациклить

Comments

[s24344]

Спасибо за предложенный вариант, но к сожалению данное решение не подходит, т.к. техническое задание именно в том, чтобы первый элемент ушел в opacity, а соседи встали на его место (анимировано). Ну и конечно зацикленно.

[hzzzzl]

s24344, а так?
https://codepen.io/anon/pen/vPbEXj
короче поставил еще один таймаут который в определенное время отключает css transition и потом ставит обратно

откуда кстати задание, а то кто-то вчера уже здесь спрашивал, как этот массив сортировать при клике prev/next :D

[s24344]

Да, отлично. Большое спасибо. Это задача с проекта. А спрашивал коллега мой ) Фактически можно так оставить, но я попробую сделать, чтобы translate был на всех соседей, а не только на второго. В любом случае спасибо Вам.
Что то вроде этого:

secondAnimate = (index) => {
    // if (index === 1 && this.state.animateFirst) {
    if (index !== 0 && this.state.animateFirst) {
      return "is-translate";
    }

    return "";
  };

[hzzzzl]

s24344, если честно мне самому не нравится такое решение с цепочкой таймаутов, наверняка есть вариант покрасивше, но не могу придумать так сразу :)
может придет какой нибудь угрюмый гуру реакта еще сюда и покажет