我当前的版本隐藏了每一行，但它发生得太快了，你可以 在我的 codepen中看到。通过删除顶部元素进行复制。

如果你的事件是这样展开的，我更愿意：

1. 消退
2. 向上滑动

我不确定如何使用 CSS 过渡和 ReactTransitionGroup

如果我能到达你看到元素消失的阶段，那么一切都聚集起来，那将是一个很好的开始！

我的过渡内容：

我的 CSS：

更新

我已经想出用css你可以有两个像这样依次发生的转换

所以这只是一个<CSSTransition timeout={} />实际等待它的情况......

反应更新

我有“效果”工作....见codepen

但是，显然在这里，元素仍然存在，这不是正确的功能行为

我正在尝试创建一个模式，用于使用当您单击登录按钮时淡入并在您关闭它时淡出的掩码登录。我决定让我们使用“react-transition-group”库来实现它。淡入效果很好，但它会立即淡出，而没有应用动画。我怎样才能让它工作？

连接组件：

模态根：

登录模式：

CSS：

我正在关注这个hackernoon指南https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a，以便在路由时向我的反应组件应用进入和离开动画变化。我显然已经调整了代码以适应我的网站，并决定不使用动画，而只是使用纯 CSS。现在我只是用 console.log 语句测试代码，我注意到在路由更改时没有调用 componentWillEnter 和 componentWillLeave。此外，componentWillAppear 只被调用一次。

以下是每个组件的相关代码，包括 App.js 和 index.js：

动画包装：

应用程序.js：

index.js：

Slider.js：

即将到来的.js：

有多种工具可以帮助个人使用 ReactJs 构建动画。但每个人都有自己的缺点。以下是我迄今为止探索过的工具：

ReactCSSTransitionGroup：相当有效，但我不喜欢它在 CSS 和 Javascript 之间引入耦合的方式。例如：

现在需要在 CSS 中添加 example-enter、example-leave、example-enter-active 和 example-leave-active 等类。不是这个的忠实粉丝。此外，当需要复杂的顺序动画时，这并不容易管理。

ReactMotion：另一个强大的工具。对于顺序动画也很有用。但是通过延迟来实现它们，这对于复杂动画来说不是一个好方法，因为将新元素引入链中意味着改变其他元素的延迟。

ReactTransitionGroup到目前为止我最喜欢的解决方案。它公开了生命周期钩子，并且可以使用GSAP等久经考验的库来管理动画，并且管理复杂的片段非常容易。但它适用于 DOM 节点，我们知道 React 在其渲染方法之外发生的任何变化，它都没有意识到这一点。所以即使它达到了预期的输出，它也违背了 React 的工作方式。例如，可以查看这个小提琴https://jsfiddle.net/tahirahmed/h68s0zod/（我没有做这个，我在研究时偶然发现了它。）

我知道动画发生在 DOM 节点上，对于生产环境，使用GSAP或VelocityJs或AnimeJs等久经考验的解决方案是完全有意义的。但是如何确保所有这些都与 React 兼容呢？

PS - 我尝试过Velocity-React和React-GSAP-Enhancer 之类的解决方案，但它们似乎并没有像顺序动画那样完成工作，它们往往依赖于延迟而不是承诺。此外，他们会强制更新，这不是一个好方法。

我正在关注 Wes Bos 的 Reactjs 视频。在他的第 22 个视频中，他正在教如何使用 CSSTransitionGroup 做动画。

我发现它已被弃用，所以我安装了最新的库：

反应过渡组

.

我发现 CSSTransitionGroup 已被弃用，所以我安装了新的 react-transition-group，我发现替代品：CSSTransitionGroup 的 TransitionGroup。

这是他的代码：

这是我使用新库的代码：

UI 仍然呈现，但它给我一个错误，并且在我单击 X 按钮后订单不会被删除。这是错误消息：

这是 Order.js 中第 24 行的代码：

我正在使用 React Router 4 和 React Transition Group 2.*，我无法将其设置为在页面更改时进行退出转换/动画。如果我记录转换事件，我只会得到退出事件，该事件会在我开始页面转换时触发。

淡入淡出过渡：

App.js 文件：

最后，主页文件：

我按照React Transition Group的主要文档<Transition>中的说明使用。

它可以工作，但在 Material UI 中效果不佳，尤其是在我的应用程序上随处可见的按钮：当我点击它们时，它们后面会出现一个白色 div：

控制台中出现这个奇怪的错误：

那些道具是关于过渡的，但我无法理解问题所在。

我正在使用 React 15.6.1、Material ui 0.18.7 和 React Transition Group 2.2.0

我有一个类似调查的 React 应用程序，它使用各种 UI 组件将各种问题呈现到屏幕上。

但是，调查的性质是许多问题使用完全相同的组件重新呈现。例如，“A/B 选择器”或“清单”。

我想要实现的是每个组件，无论它是被重新使用还是第一次安装到 DOM，都从底部淡出 - 一旦用户选择答案，就会淡出。

这是一个使用五个问题和一个小方框的非常基本的示例：

这行得通！但是...要完成它，我必须手动从 DOM 中删除 box 组件（在本例中是通过showingBoxobservable），为过渡持续时间设置超时，然后完全重新安装组件。

最终我想这很好，但我想知道 SO 社区中是否有人遇到过类似的情况，并且有更好的解决方法，因为卸载/重新安装并不是非常强大的 React。

我react-transition-group用来在 React 中为路由器开关设置动画：

每当任何子路线发生变化时，它也会触发动画。所以，为了解决这个问题，我使用 获取路径名this.props.location.pathname，然后使用一些非常粗略的代码来获取最后一段：

...如果是“任务”、“活动”或“笔记”，我只是将密钥设置为'noanimate'（即一些通用字符串，因此开关不会注意到）：

现在，从to的重定向在从/projectto 时/project/tasks进行双重转换，我不确定我是否打算编写一些更糟糕的字符串操作只是为了获得最后一个或倒数第二个术语，这取决于它是否'tasks'/'activity'/'notes' 或任何其他字符串。'project''noanimate'

有没有更好的解决方案，或者那是......我们应该如何做事？

所以，我的CSSTransitionGroup路由器周围Switch有一个，它有一个包含CurrentProject内部组件的路由（以及其他几个）。

转换本身工作正常，开关也是如此。但是，如果路由从一个匹配更改CurrentProject为另一个匹配CurrentProject（即，不同的项目），进入/退出转换和新Project的加载大约在同一时间，因此您可以在转换期间看到标题和内容交换。

有没有办法进行react-transition-group“退出”转换，然后等待内容加载，然后进行“进入”转换？