Как я могу сделать так, чтобы `response-beautiful-dnd` не запускал анимацию` response-transition-group`?

Question

Видео, демонстрирующее мою проблему: https://i.imgur.com/L3laZLc.mp4

У меня есть простое приложение, в котором вы можете добавлять карты в 2 разные строки. Когда карта добавляется в строку, я использую react-transition-group для запуска анимации ввода.

Однако у меня также установлен react-beautiful-dnd для включения перетаскивания карт между рядами, а также для переупорядочить сами ряды. Но когда Карта перемещается в новую Строку, или когда Строки переупорядочиваются, у некоторых карт появляется анимационный огонь «войти», который выглядит очень странно и не должно происходить.

При перетаскивании , нежелательная анимация сработает, когда

1. Карта перетаскивается на другую строку.

2. Ряд переупорядочен, и 2 строки имеют различное количество карт.

Как ни странно, нежелательные анимации не случаются, когда

1. Карта перетаскивается на новую позицию в пределах своей исходной строки.
2. Строки переупорядочены, и строки имеют одинаковое количество карт.

Я хотел бы знать, как у меня это может быть, поэтому react-transition-group анимация не будет срабатывать при изменении state с помощью react-beautiful-dnd.

Песочница моей проблемы (подробнее в комментариях в файле App.js):

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-tc40w?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Я изменил решение от RaviNila, чтобы убрать мерцание, связанное с комментариями, при перетаскивании между строками, создав дополнительную коллекцию стилей. Это мигание было вызвано этим свойством css:

transition: all 200ms ease-out;

Когда элемент отображался как часть TransitionGroup, даже если для него был задан тайм-аут 0 и "" как класс, переход все же произошел, вероятно потому что newCardItem был изменения в setTimeout. Но удаление setTimeout полностью убивает анимацию. Так что повторение стилей без этого свойства перехода полностью решает вашу проблему.

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-share-bpc43

Answer 2

В App.js вы упомянули следующий комментарий, который является вашим требованием:

---

Что я хочу:

1. I хотелось бы, чтобы анимация react-transition-group запускалась только при добавлении нового состояния

2. , а не при изменении состояния путем перетаскивания (с помощью функции onDragEnd);

---

Эту проблему можно исправить, просто введя новый флаг hasNewCard. Этот флаг будет true только при создании новой карты, а не при изменении состояния с помощью onDragEnd.

Так что здесь react-transition-group анимация должна срабатывать только тогда, когда hasNewCard имеет значение true.

Версия CodeSandbox:

https://codesandbox.io/s/get-beautiful-drag-to-not-trigger-transition-group-share-o25ej