问题标签 [react-transition-group]

我想知道如何使用 react router v4 和 react-router-config 设置 JS（非 css）动画。（我使用 GSAP 处理基本动画）

更新：

对于那些面临同样问题的人：我在 ReactTransitionGroup 的 git 页面上发现了一个类似的问题，其中有解决方案：https ://github.com/reactjs/react-transition-group/issues/182 。

老实说，90% 的解决方案都在我的脑海中浮现，我根本不明白，这是唯一对我有意义的部分（取自React TransitionGroup 和 React.cloneElement 不发送更新的道具这与 git 问题有关）：

向留守儿童传递道具？ 现在的问题是，为什么不将更新的道具传递给离开元素？那么，它将如何接收道具？道具从父组件传递到子组件。如果您查看上面的示例 JSX，您可以看到离开元素处于分离状态。它没有父级，它只是被渲染，因为它正在将它存储在它的状态中。

我必须进一步研究和了解父子组件的通信方式。我对 Web 开发还很陌生，但事情正在慢慢开始变得有意义。

------------------

最初的问题是：

当您尝试通过 React.cloneElement 将状态注入您的子代时，离开的组件不是这些子代之一。

我有一个小应用程序，其中包含一个导航菜单和嵌套在开关容器之间的路由。每次单击导航项，我都会检查索引是更高还是更低以相应地设置动画状态（左或右），然后存储单击的导航项的新索引。

每次我切换路线时，应用的动画要么是淡入淡出，要么是淡入淡出。现在这一切正常，但唯一的问题是当类从左向右切换时，应用的 EXIT 动画使用给定的前一个类。

我理解为什么会发生这种情况，这是因为使用的出口类是最初设置的，当新类仅应用于第二次更改时，新出口会生效。过渡文档非常有限，我找不到任何东西。

应用于过渡的 CSS 类：

我在我的项目中使用 react-transition-group。到目前为止，整个项目运行良好，但有些事情让我感到困惑。如果没有 TransitionGroup，项目的动画将无法工作。

该文件称“该组件管理列表中的一组组件”。我仍然不知道为什么会这样。谁能告诉我？？？

我正在尝试使用反应路由器 4 和 CSSTransitionGroup 为路由之间的过渡设置动画。似乎部分工作 - 进入组件有时会根据需要进行动画处理（但并非总是如此），退出组件会消失而没有过渡。这是未按预期运行的渲染函数：

整个应用程序可以在这个沙盒中看到： https ://codesandbox.io/s/vyn7zl2993

非常感谢您的帮助。

我正在使用material-uiv1 beta中的 Collapse 和 Drawer在移动网站上创建导航。导航有许多嵌套列表。

当我单击展开/折叠折叠时，在折叠开始动画之前会有明显的延迟。抽屉上也会出现同样的问题。

Collapse 和 Drawer 都使用 Transition 来制作动画。过渡由 提供react-transition-group。

为了提高响应能力，我计划使用没有过渡的折叠和抽屉（我不介意没有动画）。有没有办法在没有过渡的情况下使用折叠和抽屉？

PS 我检查了 Collapse 和 Drawer 的文档，没有找到禁用转换的道具或标志。

我正在使用react-routerwithreact-transition-group在整页组件之间切换（想想一本简单的书）。但是有时下一页有一些图像。因此，在所有图像/包含的 CSS 也加载之前，我不希望加载下一页。我不介意在此转换发生之前有一个加载器，等待下一个组件加载。

但是我找不到在整个下一个组件加载时调用事件的任何方法。componentDidMount()在传入的组件上不识别图片是否已经加载到新的组件中，所以当下一个组件滑入的时候，图片经常加载不出来，所以不是很流畅。

这是我的 CSSTransition 和 Switch 代码：

我正在为一个项目使用 React 路由器。我想为位于父路由内的单个路由设置动画（基本上，单个项目将在项目列表顶部显示为“模态”，因此父路由的内容需要在子路由时保持不变可见。

路由现在可以正常工作，但是在制作动画时会遇到困难。我记得在某个时候看到过一个例子，其中一个 sidenav 被动画化为一条路线，但我现在在任何地方都找不到它......

示例代码：https ://codesandbox.io/s/1447zpvlzj

当前行为：我正在关注反应路由器教程 中的示例当在示例中向 like 添加键时，应用程序会在路由更改时中断。当键被移除时，路由会改变，但不会发生转换（进入和退出类不会添加到路由中）。

我还尝试将路由包装在 div 而不是 Switch 中。这实际上给了我一个适当的过渡。但是，退出转换会中断，因为路由内容（包装器 div 内的内容）实际上会在退出转换超时完成之前消失

我想使用淡入淡出过渡来显示带有加载动画的叠加层，但淡入淡出组件仅处理不透明度并且元素仍然存在。我想创建一个自定义动画，以确保在淡入之前不会将覆盖元素呈现在我的内容之上。

我尝试安装react-transition-group自己来制作一个，但每次我尝试导入它都试图进入material-ui节点模块并出于某种原因从那里加载它。

我怎样才能更新现有的过渡或能够从react-transition-group组件创建我自己的

我正在使用 React Router 和 React Transition Group 在路由之间设置动画。我在使用<Redirect />组件时遇到问题。该应用程序有效，但我从 React Router 收到多个警告，内容如下：

警告：您尝试重定向到您当前所在的同一路线：“/”

您可以在此Code Sandbox中看到它发生的情况。确保打开沙盒控制台，然后输入错误的路径（如 codesandbox.io/abc）。

我尝试按照他们在文档中提供的示例（https://reacttraining.com/react-router/web/example/animated-transitions），但这不包括重定向。有没有更好的方法来使用重定向和转换来避免警告？

我设置淡入淡出过渡的代码是最简单的：

将您的任何组件包裹在其中进行尝试。我试图用它构建一个片段，但我没有成功地用 React 构建一个片段，对此感到抱歉。

我的问题：感谢componentDidMount我可以切换组件的状态并使淡入效果完美。但是，我很难将淡出放置到位：使用componentWillUnmount并不能使它起作用。

我的问题的解决方案是什么？我应该如何延迟组件的卸载以进行过渡？