title: How to apply transitions to full page in material-ui and keep AppBar fixed?
body: <p>How can I keep the material-ui AppBar fixed at top if it's wrapped together with page contents in a transition? Obviously, I'd like the AppBar to transition (e.g. Zoom or Slide) in with the rest of the page contents.</p>
  
  <p>I first discovered this when trying to use the material-ui Dialog component in fullScreen mode. If the page contents has height enough to create a scrollbar, the AppBar in the Dialog scrolls off the page, even if it's position is set to <code>fixed</code>.</p>
  
  <p>To reproduce issue, go here (<a href="https://codesandbox.io/s/2471jyxxkr" rel="nofollow noreferrer">https://codesandbox.io/s/2471jyxxkr</a>) and click the OPEN FULLSCREEN DIALOG button, and then scroll down. Or alternatively go here (<a href="https://codesandbox.io/s/lrxv6w43y9" rel="nofollow noreferrer">https://codesandbox.io/s/lrxv6w43y9</a>) and scroll down. How do I fix the AppBar at top instead of scrolling?</p>
  
  <p>One possible workaround would be to conditionally render an AppBar for the duration of the transition, but then hide that one and show one outside the transition after the transition has completed. But that seems like a hack.</p>
  
  <p>I'd be happy to use an npm module that handles nice page transitions.</p>
  
  <p>I found one attempt with a pre-v1 version of Material-Ui here (<a href="https://www.npmjs.com/package/material-ui-fullscreen-dialog-transition-fix" rel="nofollow noreferrer">https://www.npmjs.com/package/material-ui-fullscreen-dialog-transition-fix</a>), but I'd like something tha works with > v1, if possible.</p>
  
  <p>Also this looks nice, but it says it does not fully support React Router v4.
  <a href="https://github.com/trungdq88/react-router-page-transition" rel="nofollow noreferrer">https://github.com/trungdq88/react-router-page-transition</a> (although maybe it supports it well enough <a href="https://github.com/trungdq88/react-router-page-transition#using-with-react-router-4" rel="nofollow noreferrer">https://github.com/trungdq88/react-router-page-transition#using-with-react-router-4</a>)</p>
  
  <p>See also <a href="https://github.com/mui-org/material-ui/issues/12096" rel="nofollow noreferrer">https://github.com/mui-org/material-ui/issues/12096</a></p>