A transition is an animation usually used to move content in or out of view.


This section is intended as a reference for specific use cases of components, or compositions of them, that are not covered in the component's default examples.



A Transition animates a single child by toggling the the visible prop.

Do not unmount a Transition child or else it cannot be animated.

  • Use the unmountOnHide prop to unmount the child after the animation exits.
  • Use a Transition.Group to animate children as they mount and unmount.

Transition Group

A Transition Group animates children as they mount and unmount.


Directional Animations

This explorer animates Transition Group children as they mount and unmount. Use it to try directional animations that show and hide the element.

Static Animations

This explorer animates a single Transition child by toggling the visible prop. Use it to try unidirectional animations for elements that are always visible.

Trigger static animations just as you trigger directional animations, by toggling the visible prop. The value is not significant since static animations are unidirectional.



Duration of the CSS transition animation can be defined separately for hide and showanimations.

This is the bottom