在状态更改时使用成帧器运动为反应组件制作动画答案

【问题标题】：Issue animating react components using framer motion on state change在状态更改时使用成帧器运动为反应组件制作动画
【发布时间】：2020-08-29 01:08:03
【问题描述】：

我在使用成帧器动作使动画工作时遇到了一些问题。任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

您在这里尝试使用自定义属性有点过火了。 animate 中的简单三元条件就可以了。

另外，你的增量减量函数有一个错误，我也修复了它。

【讨论】：

感谢您的帮助。我从自定义属性开始，因为我最终将为我绘制的每棵树拥有 3 个单独的状态。我对自定义属性做错了什么？我是成帧器运动的新手。
自定义的问题是它只渲染一次，所以它不响应状态变化，因此你看不到状态变化的 UI 更新。我知道的唯一用例是文档中提供的用例，例如，延迟具有不同值的元素，例如这里 codesandbox.io/s/framer-motion-issue-forked-fursm?file=/src/… 。所提供的解决方案是处理此类情况的推荐方法，无论您有多少个状态。
那么这个例子是如何工作的，因为变体需要根据方向是动态的。 example
不，不，它与方向无关。当您映射您的项目时，延迟的值根据其索引进行硬编码。把它想象成 3 个独立的对象，它们拥有动画属性。它是动态分配的，是的，但仅在初始渲染期间，然后每个对象都有硬编码的延迟值（第一个 0，第二个 0,5 和第三个 1）。我说清楚了吗？
是的，这是有道理的，但我指的是我在上一条评论中链接到的示例幻灯片。但我想我也明白了。再次感谢您的帮助。