9

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

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

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

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

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

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

奇怪的是，不需要的动画不会发生

  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

4

2 回答 2

3

我已经修改了 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

于 2020-03-10T08:43:36.270 回答
2

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

我想要的是：

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

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

只需引入一个新标志即可解决此问题hasNewCard。此标志true仅在创建新卡时出现，而不是在状态被 修改时出现onDragEnd。

所以这里的动画应该只在isreact-transition-group时触发。hasNewCardtrue

代码沙盒版本：

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

于 2020-03-07T06:41:06.077 回答