¿Cómo puedo hacer que `react-beautiful-dnd` no desencadene una animación` react-transition-group`?

Video que muestra mi problema: https://i.imgur.com/L3laZLc.mp4

Tengo una aplicación simple donde puedes agregar tarjetas a 2 filas diferentes. Cuando se agrega una tarjeta a una fila, estoy usando react-transition-grouppara activar una animación "enter".

Sin embargo, también lo he react-beautiful-dndinstalado para permitir arrastrar Cartas entre las Filas, y también para reordenar las Filas mismas. Pero cuando una Carta se mueve a una nueva Fila, o cuando se reordenan las Filas, algunas de las cartas tienen su fuego de animación "enter", que se ve muy extraño y no debería estar sucediendo.

Al arrastrar, la animación no deseada se disparará cuando

1. Una tarjeta se arrastra a una fila diferente.

2. Se reordena una fila y las 2 filas tienen diferentes números de cartas.

Curiosamente, las animaciones no deseadas no sucederán cuando

1. Una carta se arrastra a una nueva posición dentro de su fila original.
2. Las filas se reordenan y las filas tienen el mismo número de cartas.

Me gustaría saber cómo puedo tenerlo para que las react-transition-groupanimaciones no se activen cuando statese modifique usando react-beautiful-dnd.

Sandbox de mi problema (Más información en los comentarios en el App.jsarchivo):

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

Modifiqué la solución de RaviNila para eliminar el parpadeo antes mencionado al arrastrar entre filas, introduciendo una colección adicional de estilos. Ese parpadeo fue causado por esta propiedad css:

transition: all 200ms ease-out;

Cuando el elemento se representaba como parte de TransitionGroup a pesar de que estaba configurado en el tiempo de espera 0 y "" como una clase, la transición todavía sucedía, probablemente porque newCardItem era cambios en setTimeout. Pero eliminar setTimeout mata completamente la animación. Por lo tanto, repetir los estilos sin esa propiedad de transición corrige completamente su problema, afaics.

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

En App.jsusted ha mencionado el siguiente comentario, que es su requisito:

Lo que quiero:

1. Me gustaría que las react-transition-groupanimaciones se disparen solo cuando se agregue un nuevo estado

2. y no cuando el estado se modifica arrastrando y soltando (con la onDragEndfunción);

Este problema se puede solucionar simplemente introduciendo una nueva bandera hasNewCard. Esta bandera será truesolo cuando se cree una nueva tarjeta, no cuando el estado sea modificado por onDragEnd.

Así que aquí la react-transition-groupanimación debería dispararse solo cuando hasNewCardsea true.

Versión de CodeSandbox:

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