This is a small extension of Facebook's TransitionGroup
and TransitionGroupChild
components from React source code.
What's changed
TransitionGroup
listens for bubbling click events from elements inside it and looks for data-direction
attribute. Then, it sets a class for animated element: <animation name>-direction-<direction name>
.
There is also a setDirection
method on TransitionGroup
to set direction name programmatically.
Usage
var TransitionGroup = ; // Wrap your element <TransitionGroup ="slide" ="tg"> <RouteHandler /></TransitionGroup> // Assign data-direction attribute <a ="#next" ="forward">Next</a> //will add .slide-direction-forward class when animating elements<Link ="step-one" ="whatever">Back</Link> //will add .slide-direction-whatever class when animating elements // "API"thisrefstg;