9

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

damon
  • 2,687
  • 8
  • 25
  • 35

2 Answers2

3

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

fxdxpz
  • 1,969
  • 17
  • 29
  • I am pleased that your solution solves the blinking issue, though I'm wondering if you can explain why you used `setImmediate()` on line 75? `setImmediate` is non-standard according to MDN, and they recommend not using in production, which my complete app intends to do. – damon Mar 10 '20 at 12:40
  • you can change it to setTimeout, it was just something I've been experimenting with and not important to your issue – fxdxpz Mar 10 '20 at 12:56
  • Thank you for helping solve this issue for me! I have awarded you the bounty :) – damon Mar 10 '20 at 23:51
2

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

Ravichandran
  • 1,029
  • 6
  • 11
  • In your version there is a blink in the row from which item has been dragged from. – fxdxpz Mar 10 '20 at 05:55
  • Blink happens because of the dynamic size variation. if all the items are same size it wont probably happen. – Ravichandran Mar 10 '20 at 06:17
  • It does happen if it is same item in each row, dragged around. Even more, you can add just one item to any row and drag it around, it will blink in the previous row each time – fxdxpz Mar 10 '20 at 06:27
  • 1
    I wish I could split the bounty, but since @PompolutZ was able to fix the flickering issue, I had to give it to him. I really appreciate your initial help. – damon Mar 10 '20 at 23:56