Tuesday, 24 October, 2017 UTC


Summary

Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other.
See the Pen React transition between two components by Stanko (@stanko) on CodePen.
In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper.
Then it will animate wrapper’s height to a new component’s height, fade out previous component and fade in the new one. Finally when animation is finished it will reset wrapper’s height to auto.
I might release it as a standalone npm component, but it needs some polishing before I do so. If you make use out of it, please share in the comments.