2

有多种工具可以帮助个人使用 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 兼容呢？

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

4

1 回答 1

0

我正在组合ReactCSSTransitionGroup和styled-components。

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

于 2017-08-07T13:45:27.587 回答