How can I make `react-beautiful-dnd` not trigger a `react-transition-group` animation?

Question

Video demonstrating my issue: https://i.imgur.com/L3laZLc.mp4

I have a simple app where you can add Cards to 2 different Rows. When a card is added to a row, I'm using react-transition-group to trigger an "enter" animation.

However, I also have react-beautiful-dnd installed to enable dragging Cards between the Rows, and also to re-order the Rows themselves. But when a Card is moved to a new Row, or when the Rows are re-ordered, some of the cards have their "enter" animation fire, which looks very weird and should not be happening.

When dragging, the unwanted animation will fire when

1. A Card is dragged to a different Row.

2. A Row is re-ordered and the 2 Rows have different numbers of Cards.

Oddly, the unwanted animations will not happen when

1. A Card is dragged to a new position within its original Row.
2. The Rows are re-ordered and the Rows have the same number of Cards.

I would like to know how I can have it so the react-transition-group animations will not fire when the state is modified by using react-beautiful-dnd.

Sandbox of my issue (More information in comments in the App.js file):

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

Answer 1

I have modified solution by RaviNila to remove afforementioned blink when you drag between rows, by intoducing additional collection of styles. That blink was caused by this css property:

transition: all 200ms ease-out;

When item was rendered as a part of TransitionGroup even though it was set to timeout 0 and "" as a class, the transition still happend, propbably because newCardItem was changes in setTimeout. But removing setTimeout completely kills the animation. So repeating the styles without that transition property fully fixes your issue, afaics.

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