Example from https://react-md.dev/packages/transition/demos#cross-fade-examples

Transition Example - Cross Fade Examples

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Transition Example - Cross Fade Examples</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.code {
  @include rmd-typography(body-1);

  font-family: 'Source Code Pro', Consolas, Monaco, monospace;
}

.inline {
  color: var(--code-color);
  white-space: pre-wrap;
}

.ticked {
  &::before,
  &::after {
    content: '\`';
  }
}

.oneline {
  white-space: nowrap;
}


import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import cn from "classnames";

import styles from "./Code.module.scss";

export interface CodeProps extends HTMLAttributes<HTMLElement> {
  /**
   * Boolean if the code is displayed inline with other text normally meaning it
   * is not a child of the `CodeBlock` component.
   *
   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not defined
   */
  inline?: boolean;

  /**
   * Boolean if the code should no be able to line wrap. This should really only
   * be enabled when the parent element also has `white-space: nowrap` and
   * overflown text should be ellipsis-ed
   *
   * @defaultValue `false`
   */
  noWrap?: boolean;

  /**
   * Boolean if the code should display backticks before and after the content
   * to help show that this is a code block.
   *
   * @defaultValue `true` when the `dangerouslySetInnerHTML` prop is not define
   */
  ticked?: boolean;
}

/**
 * This component is normally used to render inline code throughout the website.
 */
export default forwardRef<HTMLElement, CodeProps>(function Code(
  {
    children,
    className,
    dangerouslySetInnerHTML,
    inline = !dangerouslySetInnerHTML,
    ticked = inline,
    noWrap = false,
    ...props
  },
  ref
) {
  return (
    <code
      {...props}
      ref={ref}
      className={cn(
        styles.code,
        {
          [styles.inline]: inline,
          [styles.ticked]: ticked,
          [styles.oneline]: inline && noWrap,
        },
        className
      )}
      dangerouslySetInnerHTML={dangerouslySetInnerHTML}
    >
      {children}
    </code>
  );
});


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.container {
  @include rmd-utils-scroll;

  height: 20rem;
}


import type { HTMLAttributes, ReactNode } from "react";
import { forwardRef } from "react";
import cn from "classnames";

import styles from "./Container.module.scss";

interface Props extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

export default forwardRef<HTMLDivElement, Props>(function Container(
  { children, className, ...props },
  ref
) {
  return (
    <div {...props} className={cn(styles.container, className)} ref={ref}>
      {children}
    </div>
  );
});


import type { ReactElement } from "react";
import { Suspense, useState } from "react";
import { AppBar } from "@react-md/app-bar";
import { CircularProgress } from "@react-md/progress";
import { Tabs, TabsManager } from "@react-md/tabs";
import { CrossFade } from "@react-md/transition";
import { Typography } from "@react-md/typography";

import useFakeLazyImport from "./useFakeLazyImport";

import Container from "./Container";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";

interface CurrentPageProps {
  page: number;
}

function CurrentPage({ page }: CurrentPageProps): ReactElement {
  let content = <Page1 />;
  if (page === 1) {
    content = <Page2 />;
  } else if (page === 2) {
    content = <Page3 />;
  }

  return <CrossFade>{content}</CrossFade>;
}

export default function CrossFadeExamplesAsync(): ReactElement {
  // just make it so it doesn't start loading until a new tab is shown
  const [page, setPage] = useState<number>(-1);
  const Content = useFakeLazyImport<CurrentPageProps>(CurrentPage, page, 5000);

  return (
    <>
      <TabsManager
        activeIndex={page === -1 ? 0 : page}
        onActiveIndexChange={(index) => setPage(index)}
        tabs={["Page 1", "Page 2", "Page 3"]}
        tabsId="static-transition"
      >
        <AppBar theme="default">
          <Tabs />
        </AppBar>
      </TabsManager>
      <Container>
        {page === -1 && (
          <Typography type="headline-6">
            {'Click on "Page 2" or "Page 3" to start the demo'}
          </Typography>
        )}
        {page !== -1 && (
          <Suspense fallback={<CircularProgress id="async-loading-progress" />}>
            <Content page={page} />
          </Suspense>
        )}
      </Container>
    </>
  );
}


import type { ReactElement } from "react";
import { useEffect, useRef, useState } from "react";
import { AppBar } from "@react-md/app-bar";
import { Tabs, TabsManager } from "@react-md/tabs";
import { CrossFade } from "@react-md/transition";

import Container from "./Container";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Page3 from "./Page3";

export default function CrossFadeExamplesStatic(): ReactElement {
  const [page, setPage] = useState<number>(0);
  let content = <Page1 />;
  if (page === 1) {
    content = <Page2 />;
  } else if (page === 2) {
    content = <Page3 />;
  }

  // don't want the first render to trigger the animation, but all changes afterwards
  // should.
  const rendered = useRef(false);
  useEffect(() => {
    rendered.current = true;
  }, []);

  return (
    <>
      <TabsManager
        activeIndex={page}
        onActiveIndexChange={(index) => setPage(index)}
        tabs={["Page 1", "Page 2", "Page 3"]}
        tabsId="static-transition"
      >
        <AppBar theme="default">
          <Tabs />
        </AppBar>
      </TabsManager>
      <Container>
        <CrossFade key={page} appear={rendered.current}>
          {content}
        </CrossFade>
      </Container>
    </>
  );
}


import type { ReactElement } from "react";
import { Divider } from "@react-md/divider";
import { Typography } from "@react-md/typography";

import Code from "./Code";

import CrossFadeExamplesAsync from "./CrossFadeExamplesAsync";
import CrossFadeExamplesStatic from "./CrossFadeExamplesStatic";

export default function Demo(): ReactElement {
  return (
    <>
      <Typography type="headline-6" margin="bottom">
        Static Transitions
      </Typography>
      <CrossFadeExamplesStatic />
      <Divider />
      <Typography type="headline-6">
        Async with <Code>Suspense</Code>
      </Typography>
      <CrossFadeExamplesAsync />
      <Divider />
    </>
  );
}


import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import { Typography } from "@react-md/typography";

export default forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  function Page1(props, ref) {
    return (
      <div {...props} ref={ref}>
        <Typography type="headline-4">Page 1</Typography>
        <Typography>
          Nunc dapibus nec neque vitae aliquam. Phasellus eu luctus tortor.
          Morbi et massa lectus. Nam nec posuere urna, nec tincidunt ligula.
          Vestibulum in urna dapibus, rutrum nisi eu, convallis leo. Morbi
          maximus ultricies metus at venenatis. Nulla tincidunt in enim ac
          semper. Maecenas at felis eget dui malesuada placerat eu a dui.
          Vestibulum vel quam egestas turpis commodo euismod ac quis purus.
        </Typography>
      </div>
    );
  }
);


import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import { Typography } from "@react-md/typography";

export default forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  function Page2(props, ref) {
    return (
      <div {...props} ref={ref}>
        <Typography type="headline-4">Page 2</Typography>
        <Typography>
          Nullam consectetur rhoncus rhoncus. Nullam cursus porttitor lacus non
          facilisis. Donec tincidunt arcu sollicitudin neque iaculis
          sollicitudin. Vivamus in accumsan turpis. Praesent elementum elit
          vitae risus sollicitudin pretium. Aliquam vitae diam non libero
          efficitur consequat. Ut a porttitor nibh. Pellentesque habitant morbi
          tristique senectus et netus et malesuada fames ac turpis egestas.
        </Typography>
      </div>
    );
  }
);


import type { HTMLAttributes } from "react";
import { forwardRef } from "react";
import { Typography } from "@react-md/typography";

export default forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
  function Page3(props, ref) {
    return (
      <div {...props} ref={ref}>
        <Typography type="headline-4">Page 3</Typography>
        <Typography>
          Donec lacinia velit ac est finibus malesuada. Mauris arcu dui, euismod
          quis erat et, iaculis molestie orci. Nullam efficitur felis non
          feugiat tincidunt. Etiam sed tellus eu nunc fermentum vestibulum.
          Integer maximus iaculis fringilla. Donec tincidunt mauris quis iaculis
          volutpat. Ut tempor dui a nisl eleifend, non tempor ipsum condimentum.
          Morbi ultrices lectus a feugiat fringilla. Morbi ornare vehicula
          lorem, eu consectetur augue tristique sit amet. Vestibulum fringilla
          auctor eros, at consectetur libero hendrerit id. Interdum et malesuada
          fames ac ante ipsum primis in faucibus.
        </Typography>
      </div>
    );
  }
);


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;


import type { FC, LazyExoticComponent } from "react";
import { useMemo, lazy } from "react";

function fakeImport<P>(
  Component: FC<P>,
  delay: number
): Promise<{ default: FC<P> }> {
  return new Promise((resolve) => {
    window.setTimeout(() => {
      resolve({ default: Component });
    }, delay);
  });
}

/**
 * This is a hook that will allow lazily import a component each time the `Component`
 * changes or the `key` changes so that it can work with `Suspense` from React.
 *
 *
 * You should probably never do this... but this is a way to make it so that
 * the lazy loaded component can be re-loaded infinitely after resetting the
 * demo. Without this, the lazy implementation will immediately resolve the
 * fake import and not show any progress
 */
export default function useFakeLazyImport<P = {}>(
  Component: FC<P>,
  key: string | number | null = null,
  delay = 5000
): LazyExoticComponent<FC<P>> {
  return useMemo(
    () => lazy(() => fakeImport(Component, delay)),
    // disabled since this is really hacky and want it to also update if the key changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [Component, key, delay]
  );
}
