问题标签 [reactcsstransitiongroup]

我想为在 ReactCssTransitionsGroup 中呈现但不知道如何处理的所有子项添加交错效果。我看了这个问题，但想尝试使用反应转换组来做。如果不可能，那么我将做类似于上述链接问题的事情。

我的过渡组件非常简单：

我想在使用react-router转换时将动画应用于组件，并且我只能在初始加载后执行此操作，但是我也希望在初始安装时看到动画（页面刷新）。

这是我尝试过的。注意transitionAppear: true没有做任何事情：

我对 React 中的 TransitionGroup 有奇怪的问题。第一次不知何故，我设法创建了卡住并且不根据状态值更新的组和组件。

拥有一个始终具有 TransitionGroup 的组件 (A)。当状态改变时，它会重新渲染自己。在 TransitionGroup 我添加/删除其他组件（B）（是的，它们有唯一的键）。在组件 B 中，我有函数 componentWillLeave，它只是调用回调，因为我不想在休假时执行任何动画。这些该死的 B 组件留在我的组件 A 中！但是，如果我在 componentWillLeave 函数中执行 setTimeout() 10ms，它会正确分离。可能有人知道为什么会发生这种情况或有同样的问题吗？

谢谢，

吨

场景是：我想根据用户是点击“下一个”还是“上一个”，在不同的方向上为一系列类似 google-now 的卡片制作动画。

使用 CSSTransitionGroup 可以轻松实现一个方向的动画 - 我让“下一个”按钮触发当前卡片向上滑动并消失（下一张卡片从下方向上滑动）。

但是，我还希望“上一张”按钮为相反的过渡设置动画，即当前卡片向下滑动（以及前一张卡片向下滑动）。

问题的症结在于 CSSTransitionGroup 应该保持安装状态。我可以很容易地拥有类似的东西<CSSTransitionGroup transitionName={this.state.isForward ? 'animate-forward' : 'animate-back'}并调用下一个/上一个按钮setState({isForward: ...})，但这似乎不起作用，可能是因为 CSSTransitionGroup 必须重新渲染。

CSSTransitionGroup 可以实现我所描述的吗？

我正在尝试使用 reactjs 实现页面过渡动画（滑动/滑动）。我使用了 ReactCSSTransitionGroup它在浏览器中运行良好，但是当我使用 phonegap 构建它并在我的 android 设备上尝试它时不起作用。我希望它是这样的。我正在使用 ReactJs 和rackt/reactrouter进行转换。

开发环境详情如下： 操作系统：Windows 7 PhoneGap 版本：4.2.0-0.26.0 目标平台：Android

这是代码片段：

索引.html

这是 Main.js

我想在两个组件之间制作动画，其中第一个组件淡出并在下一个组件添加到 DOM 并淡入之前从 DOM 中删除。否则，新组件将添加到 DOM 并在旧组件被删除。你可以在这个小提琴中看到问题：

http://jsfiddle.net/phepyezx/4

一个不可接受的解决方案（对我来说）是在转换到新组件之前用 css 隐藏原始组件，如下所示：

http://jsfiddle.net/phepyezx/5

有没有办法在移除原始组件之前“延迟”安装新组件的反应？我愿意接受速度或其他一些库来实现这一点。

谢谢

我一直在寻找一个使用反应将项目添加到列表的示例，并让它为新添加的项目设置动画，但不是到列表的末尾，而是列表的开头。我找到了这个例子，但是我在本地和在线完成的所有事情，当添加到数组中的第一个位置时，我似乎无法让项目动画化。这是一个简单的反应待办事项添加项目。我怎样才能让项目添加到第一个点，并在第一个点做动画？

JS 小提琴：http: //jsfiddle.net/kb3gN/13152/

我们得到了这个改变页面动画的真棒示例，但我想以具有 4 个状态的表单管理全局页面更改动画和状态更改动画。

这就是例子。 https://github.com/rackt/react-router/tree/master/examples/animations

如果子道具在 nextProps 参数中没有相同数量的路线道具，我会尝试阻止更新。它不起作用。

有人能帮助我吗？

谢谢

我得到了我的主网址“/”，当我更改为“/registration”时，它必须进行转换。当我在“/registration”并转到“/registration/contact-infos”时，它必须在注册表状态之间进行另一次转换。

我在使用 React CSSTransitionGroup 添加页面过渡时遇到了问题。offsetHeight问题是，如果我在过渡的组件仍然处于动画状态时访问它，动画就会停止按预期工作。

在 Codepen 上查看此示例：http: //codepen.io/anon/pen/pgyBvO。

页面转换工作得很好。现在取消console.log(this.refs.container.offsetHeight)第 12 行的注释并重试：它会跳过右侧页面的进入动画。

我尝试使用 React-router 和 ReactTransitionGroup 为页面过渡设置动画。

每个页面必须有不同的过渡。

像这样，组件只是运行componentWillAppear。我也想设置离开过渡。

正确处理这些问题的最佳方法是什么？

这就是我现在尝试处理 ReactTransitionGroup 的方式：

我尝试为我的登录组件创建一个出现、进入和离开的动画。

此设置与我的注册页面和表单状态相同，并且在注册时，它可以工作。

谢谢！