A robust transition component for React projects which can handle the stress. It can cope with multiple, simultaneous transitions being queued up in quick succession as well as changes to these part way through.
I was looking for a transition component that allows for smooth page changes which can be tied to the browser history. Since the user can navigate the history at any rate they wish, the transition component would need to be able to juggle multiple transitions at a time. It seemed clear that any transitioning elements needed to be cached in some stateful manner in order to keep tabs on them between renders. Unfortunately none of the existing transition components seemed to support this idea, so subsequent renders would not be aware of any transitioning elements and they would be removed prematurely.
How it works
Inspired by React's own
TransitionManager allows you to simply declare the children you want to see, leaving the nasty diffing logic to React. Additionally, to cope with transitionends not firing in certain cases, it employs a setTimeout safety net just as the clever
TimeoutTransitionGroup from Khan Academy. It will then keep track of all children in its internal state, whether they are entering, leaving or persisting, whilst adding classes to them to trigger the appropriate css transitions. Children are only removed after the timeout is complete and all timeouts are allowed to run to their conclusion regardless of the number of render calls taking place inbetween.
Children will receive the following classes as props at each stage of their transition cycle. Please note, you will need to apply these classes to the children manually.*
addfor new elements
- prepare them for entry transition
add showfor entering elements
showis added on the next tick in order to trigger the enter css transition
add show hidefor leaving elements
hideis added in order to trigger the leave css transition
- element is removed from the dom after timeout duration
* this is subject to change in a future version as this would best be automated by
Using a similar api to
TimeoutTransitionGroup, you need to pass in a duration value in ms for the leave timeouts. All children must have a unique
TransitionManager can keep tabs on each child. E.g.
;const App = React;;
- all passed props (
classNameetc) will be applied to the rendered dom
componentattribute allows for overriding the default
The classes are passed down to the child components in the
className property. These need to be applied during the render method to take affect.
Additionally the current
transitionState is also passed as prop in case it's needed in the render logic.
var Home = React;;