嘿，每个人都试图让这个工作好几个小时。我正在尝试在路线更改时进行基本的淡入/淡出。我正在使用反应路由器 v4 和反应过渡组 v2。

我在这里阅读了大量其他问题，我可以让淡入淡出工作，但是当我点击新页面时，旧页面会立即消失而不是淡出。这是我的工作：

index.js：

应用程序.js：

home.js（所有页面都是这样的）：

样式.css：

header.js

非常感谢帮助，谢谢！

I migrated from the old CSSTransitionGroup to the new react-transition-group CSSTransition and TransitionGroup.

I'm creating (hacking) an overlay loader and I'm trying to apply animation to the overlay when it appears and disappears.

Specifically when I pass an active=true props to the LoadingOverlayWrapper then a new CSSTransition is added to the TransitionGroup (the Fadecomponent) that wraps the overlay to show.

When active=false then the CSSTransition is removed from within the TransitionGroup (the direct child of TransitionGroupis null).

This is the relevant part of the code:

And this is the relevant sass file (imported as css module):

The enter (or appear, not sure here) transition works.

The problem is that when I remove the Fade component, being replace by null then the exit transition is not applied (or not visible) but I get no error, everything else works as intended.

I'm not sure how to debug or proceed here given I have little experience with React TransitionGroup.

如何使用 react-transition-group-v2 和 react-router-v4 在进入时为子节点设置动画？例如，我们有关于包含 3 个子 div 节点的组件。

如何为每个单曲的过渡设置动画<div>About</div>。我试过<Route path="/about" component={About} />更换

但我无法理解如何将 onEnter 回调添加到每个<div>. 示例：https ://codesandbox.io/s/n0566q62lj

我正在尝试使用 React 和react-transition-group包构建自定义轮播。核心功能正在工作，但我正在努力编写 CSS 以同时执行旧项目的左滑出和新项目的左滑入。任何建议将不胜感激！我在下面包含了我失败的尝试。

HTML

CSS

我一直在阅读有关 React 过渡组的信息。95% 的材料都在谈论 CSSTransitionGroup。我的理解是 CSSTransitionGroup 只是建立在 TransitionGroup 之上，它只是提供了对应于各种动画事件的回调方法。

所以我将我的组件包装在一个 TransitionGroup 元素中，并给它一个动画事件，但它永远不会被触发。

所以我在让嵌套转换与 ReactTransitionGroup 一起工作时遇到了一些麻烦。我想要实现的是我有一个在单击时出现的画布外菜单（正在工作）然后在这个画布外菜单中有一个部分列表，单击时应该淡出，并且与该部分相关的一些信息应该淡出中。此操作应该可以切换以在部分和信息之间切换。我处于信息可切换的地步，我可以看到动画的不同阶段（进入、进入、退出、退出），但它们是静态的，没有动画。几乎发生在 4 个不同的阶段。

这是我的代码：

然后我在渲染时调用 Fade 组件：

这是在转换的不同阶段调用的样式代码：

不同转换的每个“in”道具都在 SetState 辅助方法中进行切换，这些方法按预期工作，只是在更改时没有动画！

我正在尝试使用 ReactTransitionGroup和Transition元素来实现让我的元素“动画”进出的基本案例。我对使用Entering, Entered, Exiting,Exited状态的正确方法以及其他问题unmountOnExit（似乎阻止Exited达到状态）感到困惑。

我现在正在使用这些样式：

像这样应用于 div ：

发生的情况是 div 出现白色背景（等待timeout一段时间），然后褪色为紫色。如果我删除这个 div，它会等待timeout（什么都不做）然后立即消失。

我对这个 API 中可能的状态组合的数量感到困惑。 exiting, timeout, unmountOnExit, CSS 类以及动画的应用方式。ETC..

问题

所以我想我的问题是（如果需要更多上下文，我可以提供更多代码）我怎样才能简单地实现诸如“淡入淡出”之类的东西，其中组件添加到 DOM 和删除（希望对应于 React 的componentDidMount componentWillUnmount?) 将与合理的动画对齐。

我采取的一种方法是将timeout道具设置为0. 这使得我可以设置Entering和Entered到background-color: purple并且因为初始状态是Exited（我设置background-color: white它会在安装时“淡入”（紫色）。但问题是因为timeout是0，反向转换状态（我猜测是entered-> exiting-> exited) 瞬间发生，然后组件被卸载。所以你甚至看不到过渡的“淡出”部分。

我不明白为什么我componentWillAppear, componentWillEnter and componentWillLeave的 from mysrc/AnimatedWrapper从不开火？似乎只有componentDidMount那个文件会触发。如何让其他生命周期事件触发？这是我尝试过的

这是我的src/App.js

这是我的src/Home.js

这是我的src/About.js

这是我的src/AnimatedWrapper.js

归根结底，我只是想按照这里的指南https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a尝试做动画页面过渡。如果没有提到的 lifeCycle 函数，我似乎无法做到这一点。

在测试material-ui v1.0.0-beta时，我在使用构建时遇到了以下错误webpack 3.8.0。我也遇到了一些其他类似的问题，但我希望是否有人可以确认这是一个合法的问题并且仍然被人们看到？我什至添加"react-transition-group": "^2.2.1"了package.json，到目前为止还没有运气。在此先感谢您的帮助。

我有"react-router": "^3.2.0",万一package.json这可以帮助人们了解可能是根本原因。

[更新]在调查时，我删除node_modules并发布npm cache clean了并确保通过发布清除全局缓存npm ls -gp --depth=0 | awk -F/ '/node_modules/ && !/\/npm$/ {print $NF}' | xargs npm -g rm。这并没有解决问题。

我使用 react + redux，我向服务器发出请求，在等待来自服务器的响应时，组件不显示，值为isFetching = false. 一旦收到答案，价值isFetching = ture

在我们等待服务器响应的那一刻，我想显示一个带有淡入淡出的微调器。

我使用react-transition-group来到输出。但问题是进入和退出事件不起作用，只会出现。