问题标签 [react-motion]

我有这个改变img src onClick的反应代码，它从数组中获取新的img src，我现在想使用react-motion向它添加一个动画，每次img src改变我都想播放动画到目前为止我让它工作了吗？声明但是它只会在每隔一段时间播放一次，我认为它与我所做的非常相似。这是代码：

我想要的动画类型无关紧要，因为我只是在 img src 更改后尝试播放任何动画，

我正在尝试将这两个输入动画向右移动 400 像素，并且我已经从演示中的单词中复制了很多单词，但是我不得不按住将动画绑定到的按钮，并且我我不知道为什么。我想知道你们是否可以阐明造成这种情况的原因。我很新反应，谢谢。

我试图促进视图转换，其中一个大型容器组件从一侧滑入，而另一个滑出到另一侧。

我可以让所有离散动画与反应运动一起工作，但是，我不知道如何同时处理这两个动画。

本质上，有一点是两个组件同时驻留在视口中。我觉得我对 CSS 布局的了解不足以正确处理问题。

我最初的想法是让滑动元素绝对定位在一个相对定位的容器内。但是，这种绝对定位对包含在绝对定位容器内的所有组件都有副作用。

这是一个已解决的问题（iOS 视图一直来回滑动，并在弹出视图端口时保留布局行为）。

如果有人能给我指出一个很好的资源来理解这个问题，或者给我一些一般性的建议，我将不胜感激。我的主要问题是我不知道要研究哪些主题或哪些书籍/在线资源有助于解释此类问题的解决方案。

我正在尝试制作自己的个人网站，并尝试使用 React 来实现。在这个过程中，我打算让每个部分成为不同的 React 组件。我的计划是让顶部的导航栏能够选择当前“活动”的组件，并实际呈现和显示。另外，当切换到新部分时，我希望旧组件有一个“离开”动画，而新组件有一个“进入”动画（这些都是通过 react-motion 完成的）。但是，目前进入和离开都是同时完成的，因为我同时更改了两个组件的活动状态。有什么方法可以延迟一个组件在另一个组件变为非活动状态后变为活动状态？

容纳每个部分的父组件如下所示：

然后其中一个“部分”看起来像这样：

真的很抱歉这个奇怪的问题。我正在寻找使用 react-motion 创建一个简短的弹簧动画。请多多包涵：

我有一个组件，它根据选定的基本目录加载框架内的本地目录和文件列表，有点像 mac finder 窗口。因此，根据该任意目录，获取的文件数量会有所不同，因此我的框架的高度也会有所不同（直到达到最大高度）。

现在，一旦获取了所选目录的内容，我想将这个组件的框架动态地打开到正确的高度（或最大高度）。如果我要更改目录，我需要根据获取的元素数量或直接调整到最大高度来调整框架高度。

以下是该组件的相关摘录：

您可以看到，此时defaultStyle和style变量是静态设置的。它工作得很好，特别是因为我已经将<List />组件的样式设置为overflow: scroll这样，如果有比330px这种情况更多的元素，稍微滚动一下就可以自然地浏览它。

但这不是我最终想要的。我希望defaultStyle={{x: 30}}and由子元素style={{x: spring(330, )}}的累积数量的高度动态设置。<ListItem />

我应该如何解决这个问题？我应该在某处添加父组件吗？

我使用 React-Motion ( https://github.com/chenglou/react-motion ) 的表现非常糟糕。我正在为表格行中的下拉菜单的高度设置0动画260。

动画按预期工作，但每次记录高度时，它会在约 5 秒的跨度内渲染所有这些（这太长了）：

也许我误读了文档中的某些内容，但是有没有办法避免动画滞后？

在某个用户界面中，人们可以更新图像，每当他们上传新图像时，我希望前一个图像淡入新图像。问题是动画仅在第一次更改时运行：

我有一个组件，<img>里面有两个，一个显示上一张图像，另一个显示下一张。我正在使用<Motion>并spring更改opacity旧图像，问题是动画只运行一次，第二次用户更新图像时，旧图像总是不可见的。

如何为每个渲染重置动画？

有多种工具可以帮助个人使用 ReactJs 构建动画。但每个人都有自己的缺点。以下是我迄今为止探索过的工具：

ReactCSSTransitionGroup：相当有效，但我不喜欢它在 CSS 和 Javascript 之间引入耦合的方式。例如：

现在需要在 CSS 中添加 example-enter、example-leave、example-enter-active 和 example-leave-active 等类。不是这个的忠实粉丝。此外，当需要复杂的顺序动画时，这并不容易管理。

ReactMotion：另一个强大的工具。对于顺序动画也很有用。但是通过延迟来实现它们，这对于复杂动画来说不是一个好方法，因为将新元素引入链中意味着改变其他元素的延迟。

ReactTransitionGroup到目前为止我最喜欢的解决方案。它公开了生命周期钩子，并且可以使用GSAP等久经考验的库来管理动画，并且管理复杂的片段非常容易。但它适用于 DOM 节点，我们知道 React 在其渲染方法之外发生的任何变化，它都没有意识到这一点。所以即使它达到了预期的输出，它也违背了 React 的工作方式。例如，可以查看这个小提琴https://jsfiddle.net/tahirahmed/h68s0zod/（我没有做这个，我在研究时偶然发现了它。）

我知道动画发生在 DOM 节点上，对于生产环境，使用GSAP或VelocityJs或AnimeJs等久经考验的解决方案是完全有意义的。但是如何确保所有这些都与 React 兼容呢？

PS - 我尝试过Velocity-React和React-GSAP-Enhancer 之类的解决方案，但它们似乎并没有像顺序动画那样完成工作，它们往往依赖于延迟而不是承诺。此外，他们会强制更新，这不是一个好方法。

我正在尝试使用 React Motion 创建一个基本动画：我有两个元素，可以根据组件状态显示其中的任何一个。当状态发生变化时，我希望一个元素替换另一个元素。替换动画是向左滑动和淡出离开元素的组合。

问题：当状态改变时，离开元素与进入元素变得无法区分。

插图：在这里，在我重现问题的代码笔中，单击彩色形状将更改组件的状态并替换元素。请注意，离开的组件与进入的组件相同（例如，当单击一个圆圈时，它会变为正方形并离开）。我希望离开的元素保持其初始形状。

下面是来自 CodePen 的组件代码副本：

您能否建议如何修复动画以使离开的元素在视觉上是正确的？

我正在使用 React-Konva 在我的应用程序中绘制形状。我在另一个圆圈内画了一个圆圈并将它们分组。现在，我想做的是在按钮上单击圆圈应该动画（水平移动）。这是我的相关代码：

现在我收到此错误：'无法读取未定义的属性'_idCounter'。这是因为我在 Layer 标签中引入了一个 div 容器。但是，如果我删除 div 容器并将变换样式应用于 Group 标签，则不会发生任何事情。我已阅读文档并且 Group 类不接受任何样式道具。有什么解决方法吗？