问题标签 [react-motion]

我正在尝试使用从x: -20to的 react-motion 为面包屑设置动画x: 0。

Folder > SubFolder > Child

问题是，面包屑在第一次渲染时完美动画。随后当props甚至state改变时，动画不会更新。这似乎是一个已知的错误。

我的问题是，如何在状态/道具更改时“重新启动”动画？

这个问题与这篇文章有关：

React Router v4 使用 React Motion 匹配过渡

...但我认为它应该有自己的问题。

我试图弄清楚如何使用<MatchWithFade>从这里获取的示例：

https://react-router.now.sh/animated-transitions

我看到的问题是，如果我有两个选项卡，并且我想在它们之间淡入淡出，我只会看到两个选项卡之一上的淡入淡出效果，这取决于<MatchWithFade>我的代码中首先出现的那个。

相关代码如下：

在这个例子中，导航到/one, （使用 React Router<Link>组件）将导致淡入淡出，但如果我导航到/two，则没有淡入淡出。然后，如果我<MatchWithFade pattern='/two' ... />先列出，那么我会看到淡入淡出过渡到/two，但不是/one。

只是使用<Match>效果很好，所以我认为这不是我如何<BrowserRouter>配置的基本问题。

我希望我只是在做一些愚蠢的事情，但对于我的生活，我无法弄清楚是什么。任何指导表示赞赏。

更新

我无法弄清楚如何使用 React Router 制作 jsbin（无法弄清楚如何引用其上的方法和对象，因为我只通过 import 语句使用过 RR）。所以这是下一个最好的事情：这是一个演示此问题的完整示例：

MatchWithFadethis和来自 React Router 文档的那个只有很小的区别。最大的不同是我拉出了zIndex引用，但这并没有影响行为。

如果相关，我使用 开始这个项目create-react-app，并且我使用的是 React Router 版本4.0.0-alpha.6。

这个问题是对此的后续：

React Router v4 和 MatchWithFade 的问题

我有另一个（可能很愚蠢）关于使用MatchWithFade和 React Router v4 的问题。我想做的是嵌套路由，所以顶级组件可能有这个：

<MatchWithFade pattern='/one' component={One} />

...然后One可能有这个：

<Match pattern='/one/one' Component={OneOne} />

这并没有让我觉得这是一个不寻常的模式（尽管也许是这样）。无论如何，我观察到的行为是，使用上面的示例，如果我 load OneOne，它会被挂载，然后componentWillUnmount立即被调用。如果我猜的话，我会说这TransitionMotion是跟踪一个（可能是隐藏的）实例OneOne，一旦转换完成，它就会卸载隐藏的组件。就基本 UI 而言，OneOne是呈现的。但是，如果componentWillUnmount进行任何清理（例如，从 Redux 中删除某些内容），那么该操作当然会被触发，并且与之相关的任何数据OneOne都会被吹走。

这是一个说明问题的完整示例：

One如果您加载它并打开控制台，请在和Two链接之间切换。您将在 UI 中看到交叉淡入淡出，当从一到二的转换完成时，您将在控制台中看到“ONE UNMOUNTING”。所以这是对的。

现在，单击Two One和之间Two Two。在这种情况下，Two One单击 时，您会立即在控制台中看到“TwoTwo will unmount”，这很好。但是，如果单击Two Two，您将在大约一秒钟后看到“TwoTwo 将卸载”——我认为这是父级MatchWithFade执行所花费的时间。

所以我不确定这里发生了什么。我的代码刚刚被破坏了吗？我在做 RRv4 无法支持的事情吗？我发现了一个错误吗？

任何帮助/指导表示赞赏！

在最简单的例子中：

如果我在回调主体周围放置花括号，这对我有用：

我得到一个不变的违反。我误解了这里发生的事情吗？如果我在回调中显式返回元素，我不会得到不变的违反，但动画不起作用。

我正在尝试使用动画在我的 React + Redux 应用程序中添加新评论react-motion。

然后将样式传递给Comment组件中的第一个 div。

加载评论时动画正常。但是用户添加评论，然后fetchComments调用该方法来获取所有评论，动画不会发生。这与redux有关吗？我正在使用mapStateToPropsand传递我的评论connect。

单击按钮后，我想让 div 左右移动 3 次。我可以使用下面的代码来完成它。jsfiddle在这里

但我想知道除了更改状态并将更改传递给<Motion/>. 有没有像传递这样（或类似的）按顺序动画的样式数组的选项？

APP内：

在 FramesCollection 中：

代码编译没有错误，但在浏览器中我看到 2 个错误：

警告：道具类型失败： 提供给children的道具类型无效，应为。in Motion（由 FramesCollection 创建） in FramesCollection（由 Connect(FramesCollection) 创建） in Connect(FramesCollection)（由 App 创建） in div（由 App 创建） in App（由 Connect(App) 创建）在 Connect(App) 中提供者中的 divobjectMotionfunction

和

Uncaught TypeError: this.props.children is not a function at Object.render (Motion.js:235) at ReactCompositeComponent.js:796 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 在 ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 在 ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 在 Object.mountComponent (ReactReconciler.js:46) 在 ReactDOMComponent.mountChildren (ReactMultiChild. js:238) 在 ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)

我究竟做错了什么？

我正在尝试启动并运行 react-motion，但由于某种原因，这些方法在使用 TransitionMotion 时似乎willEnter并willLeave没有被触发。

目前我的设置如下：

目前， willEnter 和 willLeave 中的 console.logs 根本不会触发。任何关于为什么会这样的建议将不胜感激

背景我正在尝试为一组元素创建一个容器，每个元素都可以从集合中删除。当一个元素被移除时，我想为它的退出设置动画，我正在尝试使用 React Motion 来实现这一点。

这是上面的示意图：

问题我想使用 React Motion 的TransitionMotion组件，但在尝试编写需要传递给它的函数时遇到了困难。这是我的——不正确的——代码：

请注意 TransitionMotion 组件中 map 函数内的这一行：return this.getModifiedChild(children[index], style)。这是错误的，因为一旦从集合中删除一个元素，它this.props.children就会改变，并且children数组的索引将不再对应于styles从这些子元素计算的数组的索引。

所以我需要一些聪明的方法来跟踪props.children从集合中删除元素之前和之后（我想不出一个；我能想到的最好的方法是find在数组上使用一个函数return this.getModifiedChild(children.find(child => child.key === style.key), style);，但是这将导致循环中出现如此多的循环，我什至不敢去想它），或者使用一些我不知道的完全不同的方法。能否请你帮忙？

我对 React 和所有花哨的东西都很陌生。

在 google-react-map 上，有一些标记。他们每个人都有一个我想在悬停时缩放的图标。

我使用 styled-components 进行样式设置

有反应运动

这在开始时运行流畅且快速，但经过几次悬停后，动画变得越来越滞后。

我可能在这里错过了一些重要的东西