[Sakes]

I'm literally working on a lib to solve this right now, specifically to be used with react-router. If you want I can contact you when finished and you can give it a whirl.

Implementation will look something like <TransitionGroupRoutes><CSSTransitionRoute path="..."/><CSSTransitionRoute path="..."/></TransitionGroupRoutes>

[nkkollaw]

Transitions are fine, I'm more worried about how to give an indication that a panel has been open or similar.

I'll check it out, though! If you have a mailing list feel feel to add me: [e-mail]

:-)

EDIT: I think your comment below is too deeply nested and it doesn't let me reply. However: I think a mailing list is useful even for personal project. In the event that the project gets traction, it would allow you/motivate you to keep working on it and improve it (I'm a professional side project creator).

As for nested animations, it might make sense to chain them..? Not sure.

[Sakes]

Good advice, I'll set it up. The problem I ran into with react-router-redux was the requirement of using location to provide the value for a key on CSSTransition. I had to use this implementation to solve the problem of the missing exit animation. https://reacttraining.com/react-router/web/example/animated-...

This uncovered a new problem for nested animations. The high-level page transition animation occurs even when the url root does not change. So I need to be able to ignore animations on Route components located high in the VirtualDOM, and apply animations (sometimes different animations) on Route components located further down.

Maybe you already know of an elegant solution to solve this problem? If so let me know! In the meantime, I'll keep bang'n on this.

Edit:

Concerning giving an indication that a panel has been opened, I'd just use CSSTransition wrapped around whatever element that is going to be introduced to show that it has been opened. Then define your 'enter' animation in css.

If that seems like overkill, and you can't use did mount to determine if the animation should be applied, then I'd just add a css className to your element to introduce some animation defined in CSS.

Obviously, I may be misunderstanding your use cases here. The above are just knee-jerk thoughts on it.

[Sakes]

Sure! Will do. Honestly, I was just building it for myself, so no mailing list. But I'd be excited to see how you like it.

The problem I'm aiming to solve is nested route animations, and allowing for different animations to be applied depending upon the previous route in history.