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

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

reactcstransitiongroup：非常有效，但我不喜欢它如何引入CSS和Javascript之间的耦合。例如：

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

现在需要在CSS中添加类，如example enter、example leave、example enter active和example leave active。我不太喜欢这个。此外，这是不容易管理时，一个是复杂的顺序动画

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

反应传递组到目前为止，我最喜欢的解决方案。它公开了生命周期挂钩，可以使用经过测试的库（如GSAP）管理动画，管理复杂的片段非常简单。但它在DOM节点上工作，我们知道，无论在其渲染方法之外发生什么变化，它都不知道。因此，即使它达到了预期的输出，它也违背了React的工作方式。例如，你可以看看这把小提琴（这不是我做的，我是在做研究时偶然发现的。）

我知道动画发生在DOM节点上，对于生产环境来说，使用久经考验的解决方案（如GSAP或VelocityJs或AnimeJs完全有意义。但如何确保所有这些都能很好地发挥作用

---

另外，我尝试过类似于速度反应和反应GSAP增强器的解决方案，但它们似乎无法完成连续动画的工作，它们往往依赖延迟而不是承诺。此外，他们还进行强制更新，这不是一个好办法。

我将

reactcstransitinggroup

和

---

因此，我在“样式化组件”中定义了所有CSS和参数。因此，任何想要重新使用此转换的人都将创建

，并且所有参数和css都在这个组件内处理。

我已经探索了ReactCSTransanitionGroup，我认为它在某些情况下完成了工作。但就像我提到的，我不喜欢一个动画必须创建多个CSS类才能工作。此外，它不会让你完全控制你的CSS动画。与此相比，我更喜欢使用ReactTransitionGroup，因为它公开了生命周期挂钩，并提供了对流程的更好控制。