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

Question

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

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

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

拖动时，不需要的动画会触发

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

2. A Row 被重新排序，并且 2 Row 有不同数量的 卡片。

奇怪的是，不需要的动画不会在

时发生

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

我想知道如何才能拥有它，以便在使用 react-beautiful-dnd 修改 state 时不会触发 react-transition-group 动画。

我的问题的沙盒（App.js 文件中 cmets 中的更多信息）：

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

Answer 1

您在App.js 中提到了以下评论，这是您的要求：

---

我想要什么：

1. 我希望 react-transition-group 动画仅在添加新状态时触发

2. 而不是通过拖放修改状态时（使用onDragEnd函数）；

---

只需引入新标志hasNewCard 即可解决此问题。只有在创建新卡时，此标志才会为true，而不是在onDragEnd 修改状态时。

所以这里react-transition-group 动画只有在hasNewCard 是true 时才会触发。

代码沙盒版本：

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

Answer 2

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

transition: all 200ms ease-out;

当 item 被渲染为 TransitionGroup 的一部分时，即使它设置为 timeout 0 和 "" 作为一个类，转换仍然发生，可能是因为 newCardItem 在 setTimeout 中发生了变化。但是删除 setTimeout 会完全杀死动画。因此，在没有过渡属性的情况下重复样式可以完全解决您的问题，afaics。

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