使用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 ：另一个强大的工具。也适用于顺序动画。但是通过延迟来实现它们，这不是复杂动画的goo方法，因为将新元素引入链中意味着改变其他元素的延迟。

ReactTransitionGroup 到目前为止，我最喜欢的解决方案。它暴露了生命周期钩子，人们可以使用经过试验和测试的库来管理动画，例如 GSAP ，并且管理复杂的部分非常容易。但它适用于DOM节点，我们知道无论React在其render方法之外经历什么变化，它都不知道。因此即使它实现了所需的输出，也违背了React的工作方式。例如，人们可以看一下这个小提琴https://jsfiddle.net/tahirahmed/h68s0zod/（我没有做到这一点，我在做研究时偶然发现了它。）

我了解动画发生在DOM节点上，对于生产环境，使用经过验证的测试解决方案是完全合理的，例如 GSAP 或 VelocityJs 或 AnimeJs 。但是如何确保所有与React一起运作良好？

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

Answer 1

我正在合并ReactCSSTransitionGroup和styled-components。

所以我在＆＃34;样式组件＆＃34;中定义了所有CSS和params。因此，任何想要重新使用此转换的人都会创建<ExampleTransitionGroup>，并且所有参数和css都在此组件内处理。