Slide Up and Down with React Transition Group

Slide Up and Down with #reactjs Transition Group

  • I already solved the vertical slide dilemma with jQuery, but I needed to implement it for React Transition Group.
  • When items are entering a list, we want them to fade in and smoothly slide the surrounding elements away, instead of brutally shifting our interface.
  • Transitions work by easing from one initial value to an other defined one.
  • The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather adapt this value to fit the content.
  • My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top.

Some UI effects are very simple, yet difficult to achieve. I already solved the vertical slide dilemma with jQuery, but I needed to implement it for React Transition Group.

Some effects are very simple, yet difficult to achieve. I already solved the vertical slide dilemma with jQuery, but I needed to implement it for React Transition Group.

When items are entering a list, we want them to fade in and smoothly slide the surrounding elements away, instead of brutally shifting our interface.

Transitions work by easing from one initial value to an other defined one. The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather adapt this value to fit the content. Therefor, it is quite tricky to animate the entrance of randomly sized blocks without jumping stroboscopically into the margin, padding and box-sizing soup.

My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top. This offset is equal to the calculated height difference of the container between before and after appearance.

The code is available on GitHub.

Slide Up and Down with React Transition Group