[英]How to animate on entrance SVG images gradually with reactjs?
I'm quite new to React, 我对React很新
I have imported an SVG and would like to animate few clones of it, eventually they will end up in the same row, should i be using use flexbox? 我已经导入了SVG,并希望为其制作一些克隆的动画 ,最终它们最终会出现在同一行中,我是否应该使用flexbox?
I have done it statically using flexbox, but i would like to animate each svg component so they will appear on the screen gradually (one after the other). 我已经使用flexbox 静态地完成了此操作,但是我想为每个svg组件设置动画,以便它们逐渐出现在屏幕上(一个接一个)。 Any suggestions how to accomplish it? 有什么建议如何实现吗?
Thank you all 谢谢你们
you can use CSSTransitionGroup for react here are doct from react to do it https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup https://reactcommunity.org/react-transition-group/ 您可以使用CSSTransitionGroup进行反应,这里是反应的指导https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup https://reactcommunity.org/react-transition-group/
this animations works on enter and leave from dom of element 此动画适用于元素元素的进入和离开
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
/>
<CSSTransitionGroup>
you can use GSAP (GreenSock)
library to achieve that, just trigger the animation after componentDidLoad()
in your React component. 您可以使用GSAP (GreenSock)
库来实现这一点,只需在React组件中componentDidLoad()
之后触发动画即可。
You can learn about GSAP
staggering here: https://greensock.com/stagger 您可以在此处了解有关GSAP
交错的信息: https : //greensock.com/stagger
Hope it helps! 希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.