问题标签 [react-motion]

我正在尝试使用 React Motion TransitionMotion（文档）为项目列表（来自 Redux）做一个挂载/卸载动画：

问题是interpolatedStyles存储更新时数组不会更新。首先，this.props.store.visibleItems数组只有一项。这逐渐增加到两个或更多，getDefaultAnimationStyles()并getAnimationStyles()返回更新的样式，但interpolatedStyles不会更新以包含新项目。

我正在尝试使用React Motion UI Pack为我的侧边导航设置滑入/滑出动画。就是这个：

该实用程序看起来很棒，但是有些东西我无法理解。我的组件根据breakWith道具呈现按钮或sidenav。单击呈现的按钮会导致 SideNav 滑入，这一次与覆盖一起。Transition允许平滑的滑入动画，但现在我想在单击叠加层时应用滑出动画。

几个小时过去了，我开始认为这是不可能的。组件的渲染是有条件的和基于状态的（中的isThere ? (...部分render()），对吗？由于该包没有提供任何willLeave道具，因此似乎没有时间制作动画leave在状态变化和重新渲染之间设置动画，而条件渲染元素已经丢失。

还是我错过了什么？

我正在使用反应，mobx，我需要为事物制作动画。

我想做一个简单的动画链接：当第一个动画结束时，第二个开始。

作为用例考虑一个部分模板：每次用户更改部分时，当前部分淡出，然后下一个部分淡入。

有什么提示吗？

我正在尝试为我的反应组件的规模设置动画。它看起来相当简单，这基本上是在React-Motion示例中正确的：

但由于各种原因，该组件不断消失或无法正常显示。如何让这个组件的比例正确地设置动画？

我需要像在这个例子中那样移动菜单项下划线。

使用 jQuery，我会简单地获取菜单项的左侧位置和宽度。然后stop.animation在悬停时执行。

我正在尝试用React. 但我不知道该怎么做。经过谷歌研究，我发现了流行的动画反应运动库。但我找不到如何在悬停时触发动画的方法。

div我的任务是在悬停时移动蓝色下划线。请帮助我找到解决方案。

我正在尝试在calc()模板字符串中使用时完成以下操作：

这里的问题是模板文字中有一个模板文字，我不知道如何避免这个问题以使动画工作。

我需要根据字体大小和视口calc()主动调整大小，但我还希望在我向下滚动（隐藏）时在 translateY 中向上移动并在向上滚动时出现/向下移动。我已经完成了所有工作，但我只是缺少这部分。<NavBar/><NavBar/>calc()

我只是不确定如何在结合这两件事时处理这个问题。有人对这个有经验么？任何帮助，将不胜感激。

感谢您的宝贵时间，感谢您的阅读！

编辑：这是我想要实现的工作示例。我没有calc()在那里使用，这就是问题所在，但这只是为了显示预期的目标。

Here is a jQuery example for a progress bar animation. and I want this feature in Reactjs without jQuery. How to implement this feature.

我正在尝试使用 Jest 和 Enzyme 对我的 React 组件进行快照测试。一些组件中包含动画组件（从 导入react-spring/react-motion），它将一个函数呈现为其子级。这使得测试变得异常困难。我做了很多研究并提出了3个想法：

• 使用 Enzymemount渲染所有内容，并对其进行快照测试。我发现昂贵的组件不可能/无效，并且生成的快照通常非常重（1MB - 2MB）。
• 使用 Enzymeshallow和快照测试组件。然后找到动画组件，使用 Enzyme's 渲染其中的孩子并对其进行renderProp()快照测试。这很好用，直到我发现renderProp()它不能很好地与<StaggeredMotion />forreact-motion和一起使用react-spring。解决此问题的方法是显式调用函数 as .prop('children')()，然后将整个事情变浅，但代码看起来会很混乱且难以阅读。
• 只需使用酶shallow和快照测试组件。其余的都在图书馆那边。

问题是：我应该使用哪一个？如果这些都不够好，还有哪些选择？提前致谢。

（如果您需要代码示例，我很乐意提供）

我正在尝试实现 react-motion 的 TransitionMotion 包装器，并将其完成，但还有一个问题。在本例中，插值数组由两个元素组成（因为 chartConfigs.length 当前为 2），并且我在第一个元素中嵌套了另一个地图。其他一切都很好，除了当我只想要一个时我显然得到了两行。如何以干净的方式解决这个问题？

编辑：

这是我的解决方案的新版本，但很难在行上显示元素彼此相邻：

此外，当组件卸载时，我无法理解如何使用 TransitionMotion。所以基本上当我在页面上呈现不同的组件时淡出效果。我可以为此使用 willLeave() 函数吗？目前这是它的样子，但我不知道如何更进一步：

感谢您的时间和帮助！

我基本上有这个：

但是不透明度会断断续续，需要一段时间。

我只想说“淡入淡出 300 毫秒”。可以用 react-motion 完成这样的事情吗？还是必须使用 react-transition-group？