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

Posted 2023-03-06

【中文标题】如何让“react-beautiful-dnd”不触发“react-transition-group”动画？

【英文标题】：How can I make `react-beautiful-dnd` not trigger a `react-transition-group` animation?

【发布时间】：2020-06-07 13:11:46

【问题描述】：

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

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

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

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

卡片被拖到不同的行。

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

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

时发生

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

我想知道如何才能拥有它，以便在使用 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

【参考方案1】：

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

---

我想要什么：

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

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

---

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

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

代码沙盒版本：

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

【讨论】：

在您的版本中，从中拖动项目的行中有一个闪烁。

由于动态大小变化而发生闪烁。如果所有项目的大小相同，则可能不会发生。

如果它在每一行中都是相同的项目，就会发生这种情况。更重要的是，您可以在任何一行中添加一个项目并拖动它，它每次都会在上一行闪烁

我希望我可以分配赏金，但由于@PompolutZ 能够解决闪烁的问题，我不得不把它交给他。非常感谢您最初的帮助。

【参考方案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

【讨论】：

我很高兴您的解决方案解决了闪烁问题，但我想知道您能否解释一下为什么在第 75 行使用setImmediate()？ setImmediate 根据 MDN 是非标准的，他们建议不要在生产中使用，我的完整应用程序打算这样做。

您可以将其更改为 setTimeout，这只是我一直在尝试的东西，对您的问题并不重要

感谢您帮我解决了这个问题！我已经给你赏金了:)