如何使用reactjs逐渐对入口SVG图像进行动画处理？

Question

我是React的新手，

我已经导入了SVG，并希望对其进行动画克隆，最终它们将出现在同一行中，我应该使用flexbox吗？

我已经使用flexbox 静态地完成了此操作，但是我想为每个svg组件设置动画，以便它们逐渐出现在屏幕上（一个接一个）。有什么建议可以实现吗？

谢谢大家

Answer 1

您可以使用CSSTransitionGroup进行反应 这是从反应做的教条  https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup  https://reactcommunity.org/react-transition-group/

此动画在元素的dom进入和离开时起作用

<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
 />
<CSSTransitionGroup>

Answer 2

您可以使用GSAP (GreenSock)库来实现这一点，只需在React组件中componentDidLoad()之后触发动画即可。

您可以在此处了解有关GSAP的信息： https://greensock.com/stagger

希望有帮助！