Como posso fazer o `react-beautiful-dnd` não acionar uma animação do` react-transição-group`?

Vídeo demonstrando meu problema: https://i.imgur.com/L3laZLc.mp4

Eu tenho um aplicativo simples onde você pode adicionar cartões a 2 linhas diferentes. Quando um cartão é adicionado a uma linha, estou usando react-transition-grouppara acionar uma animação "enter".

No entanto, também react-beautiful-dndinstalei para permitir o arrastamento de cartões entre as linhas e também para reordenar as próprias linhas. Porém, quando um cartão é movido para uma nova linha ou quando as linhas são reordenadas, alguns deles são acionados pela animação "entrar", o que parece muito estranho e não deveria estar acontecendo.

Ao arrastar, a animação indesejada será acionada quando

1. Um cartão é arrastado para uma linha diferente.

2. Uma linha é reordenada e as 2 linhas têm diferentes números de cartões.

Estranhamente, as animações indesejadas não acontecerão quando

1. Um cartão é arrastado para uma nova posição dentro de sua linha original.
2. As linhas são reordenadas e as linhas têm o mesmo número de cartões.

Gostaria de saber como posso tê-lo, para que as react-transition-groupanimações não sejam acionadas quando o statemodificado for usado react-beautiful-dnd.

Sandbox do meu problema (Mais informações nos comentários no App.jsarquivo):

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

Modifiquei a solução do RaviNila para remover o blink mencionado acima quando você arrasta entre linhas, ao introduzir uma coleção adicional de estilos. Esse piscar foi causado por esta propriedade css:

transition: all 200ms ease-out;

Quando o item foi renderizado como parte do TransitionGroup, embora tenha sido definido como tempo limite 0 e "" como uma classe, a transição ainda ocorreu, provavelmente porque newCardItem foi alterado no setTimeout. Mas remover setTimeout mata completamente a animação. Então, repetir os estilos sem essa propriedade de transição corrige completamente o seu problema, afaics.

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

Em App.jsque você mencionou o seguinte comentário, que é a sua exigência:

O que eu quero:

1. Gostaria que as react-transition-groupanimações disparassem apenas quando um novo estado fosse adicionado

2. e não quando o estado é modificado arrastando e soltando (com a onDragEndfunção);

Esse problema pode ser corrigido apenas com a introdução de um novo sinalizador hasNewCard. Este sinalizador será truesomente quando um novo cartão for criado, não quando o estado for modificado por onDragEnd.

Então aqui a react-transition-groupanimação deve ser acionada apenas quando hasNewCardestiver true.

Versão do CodeSandbox:

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