使用 Reactjs 构建顺序动画的最佳方法是什么？

Question

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

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

    <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={700}
        transitionLeaveTimeout={700}
    ></ReactCSSTransitionGroup>

现在需要在 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 兼容呢？

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

Answer 1

我正在组合ReactCSSTransitionGroup 和styled-components。

所以我在“样式化组件”中定义了所有 CSS 和参数。所以任何想要重用这个转换的人都会创建<ExampleTransitionGroup>，所有的参数和css都在这个组件中处理。