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

Question

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

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

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

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

时触发

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

2. A Row重新排序，2 Rows的数量不同 卡片.

奇怪的是，当

时不会发生不需要的动画

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

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

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

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 时触发。

CodeSandbox 版本：

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

Answer 2

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

transition: all 200ms ease-out;

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

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