T
TanStack•2y ago
extended-salmon

need help with applying transition to out

Hey folks I'm using the react-transition-group library to apply the transition to outlet when navigating here is my code but it's not working out 
function App() {
  const { location } = useRouterState();
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <GlobalStyles
        styles={{ html: { fontSize: "62.5%" }, body: { overflowX: "hidden" } }}
      />
      <SwitchTransition>
        <CSSTransition key={location.pathname} timeout={300} classNames="page">
          <Outlet />
        </CSSTransition>
      </SwitchTransition>
      <Suspense
        fallback={<Typography>Tanstack router devtools are loading</Typography>}
      >
        <TanStackRouterDevtools position="bottom-right" />
      </Suspense>
    </ThemeProvider>
  );
}
function App() {
  const { location } = useRouterState();
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <GlobalStyles
        styles={{ html: { fontSize: "62.5%" }, body: { overflowX: "hidden" } }}
      />
      <SwitchTransition>
        <CSSTransition key={location.pathname} timeout={300} classNames="page">
          <Outlet />
        </CSSTransition>
      </SwitchTransition>
      <Suspense
        fallback={<Typography>Tanstack router devtools are loading</Typography>}
      >
        <TanStackRouterDevtools position="bottom-right" />
      </Suspense>
    </ThemeProvider>
  );
}
.page-enter {
    opacity: 0;
}

.page-enter-active {
    opacity: 1;
    transition: opacity 200ms;
}

.page-exit {
    opacity: 1;
}

.page-exit-active {
    opacity: 0;
    transition: opacity 200ms;
}
.page-enter {
    opacity: 0;
}

.page-enter-active {
    opacity: 1;
    transition: opacity 200ms;
}

.page-exit {
    opacity: 1;
}

.page-exit-active {
    opacity: 0;
    transition: opacity 200ms;
}
can anyone tell me what I'm doing wrong
4 Replies
provincial-silver
provincial-silver•2y ago
what exactly is "not working out"?
extended-salmon
extended-salmonOP•2y ago
The transition is not working when navigating I should get this effect which previous element will fade-out and new element will fade in during navigation duraing navigation the outlet is supposed to transition instead my navbar is transitioning @Manuel Schiller you there buddy for now I did little workaround which is I created a custom component which accepts a children and applied the transition to the children and then wrapped outlet with custom component
extended-salmon
extended-salmonOP•2y ago
still the transition is not happening as it's supposed which when I will navigate the previous element will fade out and the new element will fade in whereas here first the element comes and then the transition happens
extended-salmon
extended-salmonOP•2y ago
@Manuel Schiller you there buddy

Did you find this page helpful?