TransitionReplace

Manages a transition when replacing content. By default, this component will transition the height and do a cross-fade. The transition can be customized.

TransitionReplace expects only one child at any time. Swap content inside the component (usually based on some state).

Basic usage#

IMPORTANT NOTE: You must provide the key prop for all children, even when only rendering a single item. This is how React will determine that a child is new rather than just updated.

Custom Transition#

TransitionReplace uses CSSTransition from the ReactTransitionGroup package. The transitionClassNames prop is a pass-through to CSSTransitions's classNames prop. You can use this to change the crossfade animation. By default this value is pgn__transition-replace and the cross-fade is defined as below:

.pgn__transition-replace-enter {
  opacity: 0;
}
.pgn__transition-replace-enter-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 300ms ease;
}
.pgn__transition-replace-exit {
  opacity: 1;
}
.pgn__transition-replace-exit-active {
  opacity: 0;
  transition: opacity 300ms ease;
}

If you change the timing in CSS you should also match it using the enterDuration and exitDuration props.

Note:#

Children are not required. When this component is empty, the a child inserted into it will not transition the height (from zero). No "replacement" transition will occur and new content will pop in like a normal insert. This behaviour makes it easier to work with asyncronously loaded content (for example: during the first load you don't have to do any special handling).

Example#