问题标签 [react-motion]

这是来自 github 的 demo0-simple-transition 的代码。链接 如何向移动的 div 元素添加内容。希望使用它的变体来运行飞出菜单，但似乎无法弄清楚如何将内部内容放入其中。谢谢

我正在使用 react-motion 循环浏览一堆图像。我正在尝试在一定时间后以编程方式更改背景。

一旦动画立即完成，我们如何以相反的方向再次制作动画？如果我this.setState({slideUp: !this.state.slideUp});在点击处理程序中做，它工作正常。只是在动画休息功能中设置状态时它不起作用，我不知道为什么。

努力让我的头在 React Motion v4 中“旋转”和“缩放”，似乎无法在网上找到很多关于如何做到这一点的信息。更改简单的 css 属性以及简单的状态更改很容易，如下所示：

但是，我如何使用更复杂的 css 属性来完成上述操作，例如“ transform: rotate(90deg) ”？

最后，如果我想要更复杂的状态逻辑，例如在翻转和推出时发生的动画，以及各种状态是真还是假，最好在哪里做？在使用 React Motion 之前，我正在根据元素的状态和一些条件更新元素的内联样式，我现在不确定如何仅使用 React Motion 来做到这一点。欢迎您的想法！:D

txx

这么简单的事情应该很容易完成，但我正在为它的复杂性而烦恼。

我要做的就是为 React 组件的安装和卸载设置动画，仅此而已。这是我迄今为止尝试过的以及为什么每个解决方案都不起作用的原因：

1. ReactCSSTransitionGroup- 我根本没有使用 CSS 类，都是 JS 样式，所以这行不通。
2. ReactTransitionGroup- 这个较低级别的 API 很棒，但它需要您在动画完成时使用回调，因此在这里仅使用 CSS 过渡将不起作用。总是有动画库，这就引出了下一点：
3. GreenSock - 许可对于商业用途 IMO 来说过于严格。
4. React Motion - 这看起来很棒，但是TransitionMotion对于我需要的东西来说非常混乱和过于复杂。
5. 当然，我可以像 Material UI 那样做一些诡计，其中元素被渲染但保持隐藏（left: -10000px）但我宁愿不走那条路。我认为它很hacky，我希望我的组件卸载，以便它们清理并且不会弄乱DOM。

我想要一些易于实现的东西。在安装时，为一组样式设置动画；在卸载时，为相同（或另一组）样式设置动画。完毕。它还必须在多个平台上具有高性能。

我在这里撞到了一堵砖墙。如果我遗漏了什么并且有一种简单的方法可以做到这一点，请告诉我。

全部：

我对 React-Motion 很陌生，其 github 上的大多数示例都是关于如何插入单个数字，我想知道我想对其应用一组数据对象，我该如何实现呢？

我的用例是实现从 D3 转换为 svg 路径的相同效果

我在想类似的事情：

谢谢

我正在尝试this.props.data使用 react-motion TransitionMotion 和 spring 在 React 中使用装载/卸载动画渲染一组数据（）。该数据正在通过搜索/过滤功能从单独的组件更新。我尽力遵循 API 参考，但控制台调试仍然向我抛出此警告：Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

尽管有这个警告，数据仍然设法呈现。没有挂载/卸载转换，即使我最多只渲染 10 个项目，当我更改this.props.data.

有谁知道我的代码发生了什么时髦的事情？感谢您对调试的任何帮助。

我喜欢 RR4 和 RM，React Router V4 已经有很好的例子（https://github.com/ReactTraining/react-router/tree/v4/website/examples），但我很难理解如何使用新的 V4 API 用于在我的路由器中使用 React Motion 进行不同匹配之间的转换，在我的“页面”之间淡入淡出。

我试图了解 Transition 示例如何与 MatchWithFade 一起使用，但我错过了如何将其应用于代表我的页面结构的多个匹配项。

举个例子：给定我的路由器中设置的两条路线，我如何通过带有 TransitionMotion 的 react-motion 处理安装和卸载？

任何帮助将不胜感激。

有没有人尝试将 react-motion 添加到 rails 项目？没有为此种下任何宝石，但使用它会很棒。

我必须采取哪些步骤才能使用它？

我一直在尝试将所有文​​件添加到 vendor/assets/javascrips 并在 application.js 中要求它们，但这些文件中使用的语法对我来说是新的。

我正在尝试使用 React Motion 重新创建滑动菜单。你可以在这里看到我的非工作示例：http: //codepen.io/kirupa/pen/BQVzvQ（点击蓝色圆圈显示菜单或隐藏它）

这是我的问题。当您单击黄色区域内的任意位置时，菜单应该会消失。一个工作的非 ReactMotion 示例在这里：https ://www.kirupa.com/html5/examples/slidingmenu.htm

回到 React。无论出于何种原因，我附加到 Motion 标签内的菜单元素的事件处理程序都被忽略了。相关片段如下所示：

注意onMouseDown={this.handleMouseDown}. 这是附加到蓝色圆圈的相同事件，当您单击时显示（和隐藏）菜单，并且工作正常。

我在这里做错了什么？这似乎我在做一些明显错误的事情，但我无法弄清楚它是什么。如果这有帮助，当我检查 React DevTools 中的组件时，事件处理程序甚至没有被附加。出于某种原因，这似乎真的很奇怪。这可能是范围界定问题吗？

谢谢，

基鲁帕