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

In App.js you have mentioned the following comment which is your requirement:

---

What I want:

1. I would like the react-transition-group animations to fire only when new state is added

2. and not when state is modified by dragging and dropping (with the onDragEnd function);

---

This issue can be fixed just by introducing a new flag hasNewCard. This flag will be true only when a new card is created, not when state is modified by onDragEnd.

So here react-transition-group animation should fire only when hasNewCard is true.

CodeSandbox version:

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

Answer 2

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