我有一个简单的代码测试台，我们可以在其中看到react-transition-group.v2 与通过react-router-domv4 的路径之间的导航动画异常地工作。

测试台： https ://codesandbox.io/s/oxkw5prm56?from-embed

通常，这段代码只是输出string当前单击路径的文本，然后将其放在页面正文中。

但是 .v2 中给我的一件奇怪的事情是react-transition-group，当路径改变并且新文本放置在前一个文本之前消失的那一刻 - 前一个文本字符串将自己的内容替换为新文本的内容。因此，如您所知，在单击任何路径后，我们有两个相似的文本字符串的场景，这是不正确的。

有人知道为什么会这样吗？谢谢

我有一个这样的集合列表：

这些集合是全屏图像，我想为它们制作动画。问题是我试图在没有任何点击事件的情况下为它们设置动画（更像是一个循环），并且我希望它可以无限期地进行动画处理。

这是我到目前为止所拥有的：

我正在使用componentWillReceiveProps生命周期事件来启用或禁用到下一页的转换。现在这个事件改为UNSAFE_componentWillReceiveProps，我觉得我不应该再使用它了，但是我找不到明显的替代品。

组件的位置来自props.location.pathname，所以我需要一个事件，我可以在其中访问上一个和下一个道具，然后根据是否应该有过渡来设置组件的初始外观，但是：

• getDerivedStateFromProps只能访问以前的道具。
• shouldComponentUpdate应该用于告诉组件是否应该更新，这不是我们想要的，所以它被淘汰了。
• render没有以前的道具。
• getSnapshotBeforeUpdate将参数传递给componentDidUpdate，此时组件已经渲染，所以我无法设置初始外观。

我想我可以保存以前的路径名并在下次使用它render，但这似乎不是一个优雅的解决方案。在这种情况下，最佳做法是什么？

我创建了一些动画，我想用它们在我的应用程序中的路线之间导航。我在某些页面上有一个可见的后退按钮，允许用户弹出导航堆栈以访问最近的页面。我想要两种不同的动画，一种用于在堆栈中更深地导航，另一种用于弹回最近的页面。我想使用history.goBack()，但似乎没有办法传递状态并因此使用不同的动画。

我使用这篇文章来弄清楚如何为我的组件设置动态动画，但除非我使用，否则我history.push({pathname, state:{animation, duration}})看不到如何指定在用户返回时使用的不同动画。

我需要一些帮助，因为我似乎无法理解我做错了什么......

Bellow 是我的组件和使用的 css 的渲染方法。我想要做的是，当用户未通过身份验证以查看启动屏幕而不是路由器时。

它可以工作，但问题是显示启动组件（安装）时没有淡入淡出效果，但是从启动画面过渡到路由器时有淡出淡入效果......

使成为

css

我正在开发一个轮播应用程序，我必须使用React Transition Group对其进行动画处理。出于某种原因，我似乎无法让课程正确应用。

它是专有代码和开源代码的混合体，所以如果这个示例还不够，我很乐意扩展我的示例。

React render() 调用这个：

然后css看起来像这样：

css 适用，appear但是当我循环旋转木马时，我可以看到enter和exit类从 div 中脱落，永远不会返回。我的怀疑是我做错了key={index}我读过的反模式，但我不知道如何解决它。

同样，如果需要更多代码，请说出这个词！

我快疯了，我正在构建一些旨在学习 reactjs 的示例。实际上我撞到了TRANSITIONGROUP + ROUTER。我可以毫无问题地编译，但随后出现以下错误：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查Route.

特别是它用红色标记 index.js 中的 render 方法

它让我怀疑可能是 app.js 内部的问题

在 AppRoutes 中，我定义了所有的转换逻辑

然后在单个组件中，我想获得过渡状态并应用我最喜欢的动画。

在所有情况下，我都用于进口：

对于内部组件的导出：

我用来扩展反应组件的内部组件：

我花了几天时间进行搜索和试验，结果为零。公共 github repo 中的代码： https ://github.com/acidinucleici/lezioni-react/tree/master/app04

我希望在适当的建议中使路由器和过渡工作:)

我正在尝试为使用fromJest的组件编写单元测试。我需要模拟，所以我的测试不必等待动画完成。但是，除了“跳过”动画之外，我还需要在我的模拟组件上触发回调。ReactTransitionreact-transition-groupTransitiononExitedTransition

这是我Component.js的使用方式Transition：

这是我的Component.test.js：

这个想法是，一旦button单击 a，组件就会动画，然后在完成时触发回调。

如何Transition正确模拟，使其跳过动画但仍触发onExited回调？

我正在尝试使用 react-transition-group 创建一个轮播。我已经让它大部分工作了，但我现在遇到的问题是，由于我认为 react-transition-group 事件流存在问题。当一个元素离开时，下一个元素进入，但它们都占据各自的空间。这会将界面向下推，直到过渡完成，因为这两个项目相互堆叠。然后，当转换完成时，界面会卡回原位。

我无法判断问题出在事件、css 还是两者兼而有之。

React 中的轮播：

CSS 代码：

从Products呈现的状态开始。

我想Products在上面以动画退出并ProductDetailPhotos在单击viewNavLink to={'/product-detail/' + variant.id}中存在的时候出现Products，但是，首先Products上面被替换为 newProductDetailPhotos和新的另一个ProductDetailPhotos出现在它之后。

我按时间序列解释实际如下：

1. Products DOM被渲染
2. 单击导航链接到 /product-detail
3. Products DOM立即更改为ProductDetailPhotos 1 DOM淡出退出类，然后ProductDetailPhotos 2 DOM呈现淡出出现类
4. ProductDetailPhotos 1 DOM并ProductDetailPhotos 2 DOM通过 CSS 启动动画。ProductDetailPhotos 1 DOM动画退出并ProductDetailPhotos 2 DOM进入。
5. ProductDetailPhotos 1 DOM终于消失了

我的期望如下：

1. Products DOM被渲染
2. 单击导航链接到 /product-detail
3. ProductDetailPhotos DOM首先使用淡入淡出类呈现
4. 然后Products DOM开始动画退出 CSS 与淡出退出类和ProductDetailPhotos DOM淡出出现类。

谢谢。