javascript - How do I implement a transition animation in React? -

i have react component displays multiple pages of content. clicking buttons elsewhere in application should change component displays, given transition. transition custom javascript transition, , not css one, can't use reactcsstransitiongroup.

there 2 approaches can think of. both involve passing in transition prop, differ on how next page passed component.

option a

this option uses presence of transition prop indicate should animate. keeps page1 in it's internal state can still render until transition complete. when completes component dispatches action causes parent component remove transition prop.

each of steps render of pager component parent component.

// 1 <pager currentpage={page1} /> // 2 <pager currentpage={page2} transition={transition} /> // 3 <pager currentpage={page2} /> 

option b

this option passes in both transition , nextpage explicitly. again component dispatches action when transition complete.

// 1 <pager currentpage={page1} /> // 2 <pager currentpage={page1} nextpage={page2} transition={transition} /> // 3 <pager currentpage={page2} /> 

i'm not sure of these better, or if there different approach missing.

option c

the page should know how run transition, , notify parent when done. way you'll simple api this

// not pages.. page <page   transition={{...}}   component={login}   ontransitionend={...} /> 

so can run 2 transitions @ same time, opening page1 , closing page2

you built wrapper <pager /> around pages, make calculations inside next transition in place.

<pager initindex={0} pages={[....]}> 

but <page /> should know how move