Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Question

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents.

I encountered this issue when attempting to use the material-ui Dialog component in fullScreen mode. When the page content is tall enough to create a scrollbar, the AppBar within the Dialog scrolls off the page, despite having its position set to fixed.

To replicate the problem, click here (https://codesandbox.io/s/2471jyxxkr) and open the FULLSCREEN DIALOG, then scroll down. Alternatively, visit this link (https://codesandbox.io/s/lrxv6w43y9) and scroll down. How can I prevent the AppBar from scrolling and keep it at the top?

A possible workaround could involve conditionally rendering an AppBar during the transition, hiding it once the transition is complete, and showing another outside the transition. However, this solution seems like a hack.

I am willing to utilize an npm module that facilitates smooth page transitions.

I came across a solution with a pre-v1 version of Material-Ui here (https://www.npmjs.com/package/material-ui-fullscreen-dialog-transition-fix), but I'm looking for something compatible with > v1 if feasible.

Although it appears promising, this resource mentions incomplete support for React Router v4. https://github.com/trungdq88/react-router-page-transition (however, it might be compatible enough https://github.com/trungdq88/react-router-page-transition#using-with-react-router-4)

For more information, refer to https://github.com/mui-org/material-ui/issues/12096

javascript css reactjs material-ui

Answer 1

Answer №1

If you're facing a scenario where you need to use react-router, here's an example of how you can address it:

For instance:

<BrowserRouter>
 <div className={classes.root}>
  <AppBar position="static" color="default">
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="primary"
      textColor="primary"
      fullWidth
    >
      <Tab label="Item One" component={Link} to="/one" />
      <Tab label="Item Two" component={Link} to="/two" />
    </Tabs>
  </AppBar>

  <Switch>
    <Route path="/one" component={PageShell(ItemOne)} />
    <Route path="/two" component={PageShell(ItemTwo)} />
  </Switch>
</div>

In this setup, the appbar remains fixed at the top while the other pages change based on the route.

To add transitions with routes, I've utilized react-addons-css-transition-group, which is explained in detail in this article: https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

You can also find the animation index.css file in the demo for reference.

To streamline routing, I've wrapped pages in a HOC (PageShell component).

Feel free to check out a live example here: https://codesandbox.io/s/04p1v46qww

I hope this meets your requirements!

Answer 2

If you're facing a scenario where you need to use react-router, here's an example of how you can address it:

For instance:

<BrowserRouter>
 <div className={classes.root}>
  <AppBar position="static" color="default">
    <Tabs
      value={this.state.value}
      onChange={this.handleChange}
      indicatorColor="primary"
      textColor="primary"
      fullWidth
    >
      <Tab label="Item One" component={Link} to="/one" />
      <Tab label="Item Two" component={Link} to="/two" />
    </Tabs>
  </AppBar>

  <Switch>
    <Route path="/one" component={PageShell(ItemOne)} />
    <Route path="/two" component={PageShell(ItemTwo)} />
  </Switch>
</div>

In this setup, the appbar remains fixed at the top while the other pages change based on the route.

To add transitions with routes, I've utilized react-addons-css-transition-group, which is explained in detail in this article: https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

You can also find the animation index.css file in the demo for reference.

To streamline routing, I've wrapped pages in a HOC (PageShell component).

Feel free to check out a live example here: https://codesandbox.io/s/04p1v46qww

I hope this meets your requirements!

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Answer №1

Similar questions

Testing Material UI withStyles Component with Shallow Rendering in Jest

Create an AngularJS task manager that saves your to-do list even when the page is refreshed

Typescript inheritance results in an undefined value being returned

triangle shape filled with a gradient that transitions between two colors

Exploring the images in a continuous loop

Achieving the functionality of toggling a div's visibility using jQuery by simply clicking on a

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

Significant Google Maps malfunction detected with API V3

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

Tips for aligning a div (or any other content) in the center of a

In my VueJs project, I developed a custom button component that includes a loader feature. I initially passed the loader as a prop, but I am currently facing challenges integrating it with a method in another VueJs page

Is there a way for me to personalize the background of the mui-material datagrid header?

jQuery: use the "data-target" attribute to toggle the display of a single content area

Tips on how to dynamically uncheck and check the Nebular checkbox post-rendering

Hiding and showing div elements using CSS, JavaScript, and PHP

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Acquiring the index of a selector event within a list of dynamic elements

Next.js: 404 Error Occurs When Accessing Images Post-Build

The Stripe payment form effortlessly updates in real-time thanks to the powerful @stripe/react-stripejs module

What is causing React Js to fail loading css when switching from anchor tag to link tag?