我怎样才能使‘反应-美丽-强者’不触发一个‘反应-过渡-组’动画？

Question

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

我有一个简单的应用程序，您可以添加卡到两个不同的行。当一张卡片被添加到一行时，我使用react-transition-group来触发一个"enter“动画。

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

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

1. A卡被拖到不同的行。
2. A行被重新排序，2行有不同的卡号。

奇怪的是，当不想要的动画发生时，不是

1. A卡被拖到原行中的一个新位置。
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;

当项目被呈现为TransitionGroup的一部分时，即使它被设置为超时值0和类，转换仍然会发生，这很可能是因为newCardItem是setTimeout中的变化。但是删除setTimeout会完全扼杀动画。因此，不使用此转换属性的重复样式完全解决了您的问题，afaics。

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

Answer 2

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

我想要的：

1. I希望react-transition-group动画只在添加新状态时触发，而不是在通过拖放(使用onDragEnd函数)修改状态时触发；

只要引入一个新的标志hasNewCard，就可以解决这个问题。只有在创建新卡时，此标志才是true，而不是当onDragEnd修改状态时。

因此，在这里，react-transition-group动画应该只在hasNewCard是true时才会触发。

CodeSandbox版本：

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