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

希望能幫助到你！