问题标签 [react-transition-group]

我很难用react-router-dom. 示例很好，但我无法让它Switch在react-router-dom.

我尝试在Switch组件周围或内部执行此操作，但它没有做任何事情（控制台中也没有警告或错误）。

例子

CSS

我目前正在react-transition-group与 结合使用react-router-dom来动画路线更改，这工作正常。

我遇到的唯一问题是，当切换路由并且我需要在componentDidMount生命周期挂钩中发送或获取一些数据时，它会触发两次。我很确定这是由于，react-transition-group但我想知道这个问题是否有明显的解决方案。

我发现了这一点，因为它两次在数据库中插入一个实体，这与预期的行为相去甚远。

登录转换示例componentDidMount

我正在使用 React Router v4 和 react-transition-group v2 来测试页面滑动动画。

和CSS：

动画如下：

如您所见，index page滑动到的动画detail page是正确的（从右到左）。但是当我点击Back图标时，我希望index page从左到右出来。

我知道如果我将 CSS 更改为波纹管，页面将从左到右出现：

但是如何将两个动画结合在一起呢？一般来说，每当用户点击后退图标时，动画应该是from left to right.

更新：2017.08.31

感谢@MatijaG，使用路径深度确实是一个很棒的主意。我跟着它，遇到了一个新问题。

并更新了 CSS：

动画：

从 '/' 到 '/games' 是可以的，从 '/games' 回到 '/' 仍然可以（类型 1：路由 A -> 路由 B，只有 2 个路由）。但是如果先从'/'到'/games'，然后从'/games'到'/games/lol'，则第二阶段失去动画（类型2：路线A -> 路线B -> 路线C，3或更多路线）。我们也看到从'/games/lol'回到'/games'再回到'/'，幻灯片动画和type 1不一样。

有人对这个问题有任何想法吗？

我正在使用 React 和CSSTransitionGroupmembers组件在我的应用程序状态的两组之间切换。它的状态包含members，每个都有一个标志来表明它们是否是 not 的真正成员。它还包含一个标志来跟踪我们正在查看的成员类型：

在我的render函数中，我映射了这个数组，并且只显示与视图状态相对应的成员（即如果viewMembers是true，我只显示成员在哪里isMember，true反之亦然）。对于每个成员，我返回一张表<tr>。该map函数被包装在一个CSSTransitionGroup标签中以淡入表格行。这一切都很好 - 请在此处查看工作代码：jsfiddle.net/d9cfh4zg/1/。

我的问题是它目前在淡出旧状态之前在新状态中淡出，给它带来了轻微的质量问题。如何让现有行在淡入新行之前淡出？

之前问过一个关于如何实现页面滑动动画的问题：使用 React Router v4 和 react-transition-group v2实现页面滑动动画。

在那之后，我遇到了一个更困难的问题。

CSS：

动画：

如果只是从“/”滑到“/games”，然后从“/games”滑回“/”，一切都很好。但是路线越多，就越复杂。

从 '/' 到 '/games' 时，游戏的退出动画是指定的，不可更改。但显然，它应该是动态的。

• '/' --> '/games' && '/games' --> '/', 退出动画应该是'向右滑动'
• '/' --> '/games' && '/games' --> '/games/lol', 退出动画应该是'向左滑动'

更一般地，当获得更深的路线时，滑动动画应该是“向左滑动”。否则，动画应该是“向右滑动”。

如何动态设置动画？

我试图找到一个使用 React Router v4 和 React Transition Group v2 的低级动画的工作示例。我查看了 React Router 文档上的示例，但他们只使用 CSS Animation 和一个路由。

这是我目前使用 React Router 的方式：

这是我的 Root.jsx：

我在这里测试了解决方案：https ://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a - 但它不起作用。有人能指出我正确的方向吗？

更新

我试过这样，但没有调用回调。所以我最终得到了dom中的页面。

我在项目的过渡方面遇到了一些麻烦。

所以我在新路由的页面加载之间有一个过渡，比如淡入淡出。

像这样：

由于我需要在加载组件之前加载信息，因此我在从服务器获取信息时使用相同的加载组件，如下所示：

所以我的麻烦是，当转换正在执行时，我的组件会渲染并显示另一个加载组件。

所以我一直在浏览互联网，发现我可以使用低级 API 来获取转换时的生命周期事件。因此，如果我可以使用该生命周期，我就会知道我的过渡是否结束。所以我使用了这个：

并在称为生命周期事件的子组件上

所以我期待一些 console.log 信息，但我似乎没有触发这个低级 API 的任何生命周期事件。

所有 tis 信息都基于这个小提琴 https://jsfiddle.net/Lhtoxsds/但我仍然无法执行生命周期事件

有人可以帮忙吗？

我是javascript和编码的新手，希望专业人士能给我建议。我正在尝试使用“react-transition-group”进行 CSS 转换，但它不起作用。我不明白为什么它不起作用：动画只是没有出现。控制台不显示任何错误。这是我的代码：

我想滑动一个无状态组件，该组件最初设置为display:none，在其父组件之一的状态更改后可见，就好像它像下拉菜单一样向下滑动。我是动画部分的新手，我正在尝试this_link。

到目前为止，我在 Sandbox（https://codesandbox.io/s/0xrjp051pp）中尝试了什么。

有人可以帮忙吗？

我正在构建一个简单的应用程序来做出反应。当我点击喜欢按钮时，我正在尝试更改 svgfill颜色。我进行了研究，许多开发人员都使用 React Transition Group 作为一种方式，但我很难理解它在这种情况下是如何工作的。

每次我点击like按钮时，它都会增加数字，我想改变svg背景的颜色。我已经尝试过这种方式，但它不起作用。我在这里做错了什么？这是代码。

就像 svg 作为一个组件。

CSS 注意：我选择不透明度作为测试动画是否有效。

我也愿意接受有关其他性能友好的反应动画工具的建议。