问题标签 [reactcsstransitiongroup]

我正在使用 ReactCSSTransitionGroup 做一些动画，我发现了一件有趣的事情，对我来说没有任何意义。

在下面的示例中，当我单击 时<div className="HeartControl">，它将更新工作正常height的。<div className="HeartFill">（虽然我知道这里实现效果不一定需要 ReactCSSTransitionGroup）。

有趣的是，当我点击时，会<div key={this.state.heartHeight} className="HeartFill" style={styleHeartFill}></div>在现有的之后添加一个新的 React 组件 id。

但我希望那里永远只有一个<div className="HeartFill">。

为什么会这样？？？

PS。单击几下后，结果将如下所示：

`

在 Android 5.0 上，ReactCSSTransitionGroup 似乎间歇性地工作。在第一次启动应用程序时，ReactCSSTransitionGroup 将成功地从 dom 中删除元素。然后当应用程序被杀死并重新打开时，ReactCSSTransitionGroup 不会从 dom 中删除元素

类名“example-enter example-enter-active”保留在 dom 中，不会删除元素。

下面是 ReactCSSTransitionGroup 的代码：

下面是CSS：

任何帮助将不胜感激。谢谢

我正在尝试添加动画以进入我在 React.js 应用程序（http://facebook.github.io/react/docs/animation.html）中的列表。

但是ReactCSSTransitionGroup会抛出这样的异常：

Uncaught TypeError: Cannot read property '_mockedReactClassConstructor' of undefined

连同警告：

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). warning.js:36

Warning: Only functions or strings can be mounted as React components.

我的组件看起来像：

我正在尝试为包含从其他地方获取的数据的 React 组件设置动画。把它放在一个ReactCSSTransitionGroup工作正常的地方。也就是说，直到我更改组件的render()方法以返回false，直到数据被获取（以防止它在没有数据的情况下被渲染）。

现在，我猜该组件会立即挂载，此时会添加动画类，但只会在之后渲染。这种想法正确吗？render返回实际组件时如何使组件动画化？

我正在尝试使用 为元素高度设置动画ReactCSSTransitionGroup，所以这就是我希望动画看起来像的样子：

http://jsfiddle.net/cherrry/hgk4Lme9/

问题是我并不总是知道元素的高度，所以我试图破解scrollHeight,clientHeight或类似的东西，componentDidMount并尝试设置node.style.height或添加规则到样式表

http://jsfiddle.net/cherrry/dz8uod7u/

离开动画看起来不错，但是当元素进入时，它会闪烁一点，缩放动画看起来很奇怪

应该是因为询问node.scrollHeight导致渲染立即发生，所以无论如何在动画开始之前获取相同的信息并注入css规则？还是我应该换个角度思考？

我对这个解决方案不是很满意，因为当不接近或不小于max-height时，生成的动画速度会很奇怪，而且我的组件的高度确实变化很大。max-heightheight

我可以想象最终的解决方案可能会有点混乱，但我认为将其制成 Mixin 将足以在任何地方重用它

我试图用反应过渡组创建一个简单的过渡，但我无法让它工作 - 过渡不起作用。我确实使用了唯一的密钥。

例如，我只是做了一个简单的 2 图像淡入淡出组件：

我还包括了适当的 css：

知道为什么这不起作用吗？图像确实切换，但没有褪色..

谢谢！

我正在使用 React 和 Reflux 构建一个应用程序，并且我正在尝试以特定顺序呈现项目列表。

这些项目是按时间倒序呈现的自定义 Post 组件，因此最新的帖子位于列表的顶部。

我正在使用可汗学院的TimeoutTransitionGroup让列表项淡入淡出。

我看到的问题是，当我添加新帖子并且组件通过新道具获取更新的列表时，转换发生在列表中的最后一个元素而不是第一个元素上。我想让它让第一个元素淡入，因为那是添加的新项目的位置。

帖子 2 <- 此帖子是新添加的

帖子 1 <- 此帖子淡入

有没有办法指定相同的项目顺序，但以相反的顺序呈现它们，或类似的东西？

这是我的组件的渲染功能：

这是 CSS 过渡：

任何帮助都感激不尽！

我有一个动画，可以在网格的任何新项目上运行。假设这个动画需要 5 秒才能运行。目前，如果我尝试在 5 秒内删除该元素（因此当进入动画仍在运行时），该项目将保留在列表中，直到进入动画完成。

查看文档，它说这是设计使然：

您会注意到，当您尝试删除一个项目时，ReactCSSTransitionGroup 会将其保留在 DOM 中。如果您使用带有附加组件的未缩小版本的 React，您会看到一条警告，表明 React 期望发生动画或过渡。这是因为 ReactCSSTransitionGroup 将 DOM 元素保留在页面上，直到动画完成。

您需要添加以下内容（显然更新为相关的类名），它应该适用于上述情况：

我发现不是这种情况，即使我有描述的leave类，我发现它仍在等待原始输入动画完成，这种行为是否正确，我该如何解决？

这是一个视频，显示了有问题的怪癖 - https://www.youtube.com/watch?v=3oKerWlLZIE

如果它有所作为，这里是我的课程：

更新： 源代码参考：

• 设置状态 - https://github.com/avanderhoorn/Glimpse.Client.Prototype/blob/master/src/request/components/request-summary-view.jsx#L33
• 过渡组的使用和设置键 - https://github.com/avanderhoorn/Glimpse.Client.Prototype/blob/master/src/request/components/request-summary-list-view.jsx

我想知道是否有人可以提供一些关于如何使用 React.js 实现动画组件/页面切换的见解。

我想要实现的是一个组件/页面转换，就像http://www.semplicelabs.com/上的那个 - 一个转换不透明度和边距顶部的标题以及一个转换不透明度的内容。

当显示新组件/页面时，当前显示的组件/页面应在新组件/页面过渡之前过渡出去。到目前为止，我所拥有的LayoutComponent是将页面组件呈现为CSSTransitionGroup：

我也有两个页面组件，FirstPage和SecondPage.

SecondPage代码和FirstPage代码之间的唯一区别是.containerdiv 中的内容和类名。

然后我尝试做的是添加一个带有持续时间的离开过渡和一个带有持续时间和延迟.8s的进入过渡。.8s我看到的主要问题是新页面组件是在旧页面组件的离开过渡完成之前安装的。这是我当前的 CSS：

我知道我可以动画初始安装transitionAppear={true}- 但这无助于在旧组件过渡之前安装新组件的问题。

这是我几天来一直在努力解决的问题，但我找不到解决方案。

一些可以玩的代码： https ://jsfiddle.net/gonsfx/xva2g6oo/

我有一个简单的登陆页面，我想添加一个过渡效果。我正在使用 React 进行视图渲染。我想让一个按钮根据某些状态淡入淡出：

CSS：

但是，当我运行它时，过渡不起作用。有什么我想念的吗？谢谢！