The CrossFade component is great to use for full page transitions such as route changes or animating new parts of the page into view since the transition is triggered when it is mounted. A general recommendation for using this component is to mount it near the root of your main layout surrounding the main content and set the key to be the current pathname.

The example below will show how this transition can be used as a custom @react-md/tabs transition as well as a lazy loaded Suspense transition.

Note: The CrossFade component works by cloning a ref and className prop into the child element. This means that if the children are a Fragment or a custom component that does not use forwardRef or does not apply the className prop, the transition will not work. If it is not possible to update the child component, set the wrap prop to true which will wrap the children in a <div> to and apply the ref and className to that instead.

One of the downsides to the CrossFade component is that the transition is triggered once the component mounts which means the only way to trigger new animations is by changing the key for this component. Since it isn't always ideal to have to re-mount the child component to trigger the transition, this package also exports a useCrossFade hook to implement this transition.

The useCrossFade hook is really a hook version of the CrossFade component that allows a bit more control for when the transition should fire since it uses the useCSSTransition hook behind the scenes. To create a transition, all that's required is to trigger the ENTER transition when it should be fired. Unlike the CrossFade component, the useCrossFade hook does not automatically fire on mount.

Since it's a bit hard to demo router changes that can be pushed to sandboxes, the demo below will show an example of using this pattern with the @react-md/tabs package. However, you can view the configuring your layout guide for the react-router example.

The Collapse component is used to transition a child element in and out of view by animating it's max-height. This means that the child must either be an HTMLElement or a component that forwards the ref to an HTMLElement and applies the style, className, and hidden props to an HTMLElement.

This transition should hopefully be familiar to you by now since it is used in the @react-md/expansion-panel and @react-md/tree packages.

Note: This component should not be used for position: absolute or position: fixed elements. Instead, the ScaleTransition or just a simple transform transition should be used instead. Animating max-height, padding-top, and padding-bottom is much less performant than transform transition since it forces DOM repaints.

The collapse transition can also be configured with a couple of options:

• minHeight - The minimum height that the collapsible element can be. This can be used to create partially expanding elements. Setting this to anything other than 0 will not will not remove the element from the DOM while collapsed by default.
• minPaddingTop - The minimum padding top for the collapsible element. Setting this to anything other than 0 will not remove the element from the DOM while collapsed by default. This probably won't be used much.
• minPaddingBottom - The minimum padding bottom for the collapsible element. Setting this to anything other than 0 will not remove the element from the DOM while collapsed by default. This probably won't be used much.
• temporary - Boolean if the collapsible element should be temporary within the DOM. While undefined, it will be considered true of the minHeight, minPaddingTop and minPaddingBottom options are 0.

This example will allow you to configure these options and shows how you can create some weird transitions if desired.

Another built-in transition is a simple scale transition that can either be

• scale(0) -> scale(1) (enter)
• scale(1) -> scale(0) (exit)
• scaleY(0) -> scaleY(1) (enter)
• scaleY(1) -> scaleY(0) (exit)

This is generally used for temporary material instead of the collapse transition since it is slightly more performant and that it will not move other items within the DOM while transitioning.

This transition can be used with the ScaleTransition component or a custom usage with the useCSSTransition hook. The default transition will transition both the x and y values, but enabling the vertical prop will change it to only be the y value change.

Note: You can also set your own transform-origin to modify these transitions even more.

If none of the existing components above match your use-case, you can try out the useCSSTransition hook which is basically a hook version of the CSSTransition component from react-transition-group. The only real difference between the react-transition-group is how the styles get applied and that using a string classNames will use BEM as the naming convention.

12345678910111213141516171819const classNames = "opacity";

// react-transition-group
const reactTransitionGroup = {
  enter: "opacity-enter",
  enterActive: "opacity-enter-active",
  exit: "opacity-exit",
  exitActive: "opacity-exit-active",
};

// react-md
const reactMD = {
  enter: "opacity--enter",
  enterActive: "opacity--enter-active",
  exit: "opacity--exit",
  exitActive: "opacity--exit-active",

  // if appear option enabled, also does appear states
};

This package also exports a pretty awesome hook: useFixedPositioning that ties in directly with the react-transition-group API so that you can position a fixed element to another element within the page ensuring that it can fit within the viewport. Some great existing examples of this component are the @react-md/menu and @react-md/tooltip packages since they use this hook behind the scenes position themselves automatically.

If you used react-md@v1, this is basically a new and improved version of the Layover component.