如何让“react-beautiful-dnd”不触发“react-transition-group”动画？

Question

演示我的问题的视频：https : //i.imgur.com/L3laZLc.mp4

我有一个简单的应用程序，您可以在其中将卡片添加到 2 个不同的行。当卡片添加到一行时，我使用react-transition-group触发“输入”动画。

但是，我还react-beautiful-dnd安装了启用在行之间拖动卡片的功能，以及重新排列行本身的顺序。但是当一张卡片被移动到一个新的行，或者当这些行被重新排序时，一些卡片的“进入”动画火，这看起来很奇怪，不应该发生。

拖动时，不需要的动画将在

1. 卡片被拖到不同的行。

2. 一行被重新排序，两行有不同数量的卡片。

奇怪的是，不需要的动画在以下情况下不会发生

1. 卡片被拖动到其原始行内的新位置。
2. 行被重新排序并且行具有相同数量的卡片。

我想知道我怎么能有这么的react-transition-group时候动画将不会触发state通过使用修改react-beautiful-dnd。

我的问题的沙箱（App.js文件中的评论中有更多信息）：

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

Answer 1

我修改了 RaviNila 的解决方案，通过引入额外的样式集合，在行之间拖动时消除上述闪烁。闪烁是由以下 css 属性引起的：

transition: all 200ms ease-out;

当 item 作为 TransitionGroup 的一部分呈现时，即使将其设置为超时 0 并将 "" 作为类，转换仍然发生，可能是因为 newCardItem 在 setTimeout 中发生了更改。但是删除 setTimeout 会完全杀死动画。因此，在没有过渡属性的情况下重复样式可以完全解决您的问题，afaics。

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