如何使用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/

此动画适用于元素元素的进入和离开

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

Answer 2

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

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

希望能帮助到你！