Как анимировать на входе SVG изображения постепенно с реагировать?

Question

Я довольно новичок в React,

Я импортировал SVG и хотел бы оживить несколько его клонов, в конце концов они окажутся в одной строке, если яиспользовать flexbox?

Я сделал это статически , используя flexbox, но я хотел бы анимировать каждый svg-компонент, чтобы они постепенно появлялись на экране (один за другим).Любые предложения, как это сделать?

Спасибо всем

Answer 1

вы можете использовать библиотеку GSAP (GreenSock), чтобы добиться этого, просто запустите анимацию после componentDidLoad() в вашем компоненте React.

Вы можете узнать о GSAP ошеломлении здесь: https://greensock.com/stagger

Надеюсь, это поможет!

Answer 2

вы можете использовать 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>