I've used React Router's own animation example as a starting point and gotten a simple always-fade-in animation working.
Problem is, that setup is way too simplistic, and I require anything from no transition at all to an arbitrary amount of transitions (say, leftward and rightward directed motion, replicating IOS app transitions).
As soon as I start to tweak the exit and enter props of TransitionGroup, and change classNames of the CSSTransition things break down, and nothing works as if messing with already existing elements and creating a mangle of configs (I've tried moving the exit and enter props to CSSTransition to no avail):
<Route render={({ location }) => {
let direction = location.state ? location.state.direction : null
let doAnimation = !!direction
// direction = the type of animation to use, if null = no animation
return (
<TransitionGroup enter={doAnimation} exit={doAnimation} >
<CSSTransition
key={location.key}
classNames={direction || "none"}
timeout={500}>
<Switch
location={location}>
{routes}
</Switch>
</CSSTransition>
</TransitionGroup>
)
}} />
Is there anyway of controlling animations like this, possibly disable them all together? If no, is there an animation/library providing native app like navigation and transitions for a browser app?
