route-animation

Add

npm i route-animation

Condition for animation

• you cannot use the children key for animation

• To use animation in a nested route, you must additionally specify a star. { path: /pathRoute/*, ... }

• In Router v6, nested routes are specified in path without a parent route, so you need to specify {handle: { parentRelation: '/nameRoute' } ...}

---

Use

Example 1

//...
import { RouteAnimation } from 'route-animation'

// Main Route

const mainRoutes = [
  { path: '/', element: <Home /> },
  { path: '/posts', element: <Posts /> },
  { path: '/settings/*', element: <Settings /> }
  /* children: [] - no used*/
]

export function App() {
  const location = useLocation();
  const routes = useRoutes(mainRoutes, location);

  return (
    <>
      <div className={'content_app'} style={{ position: 'relative' }} >
        <RouteAnimation itemsRoutes={mainRoutes}>
          <>{routes}</>
        </RouteAnimation>
      </div>
    </>
  )
}

const nestedRouter = [
  {
    path: '/1',
    element: (<div>Component1</div>),
    handle: { parentRelation: '/settings' },
  },
  {
    path: '/2', // /2/* for the next nesting of routes
    element: (<div>Component2</div>),
    handle: {
      parentRelation: '/settings'// /settings/2 for the next route attachment, specify the dependent router
    }
  }
]

const SettingsMemo = () => {
  const location = useLocation();
  const routes = useRoutes(nestedRouter, location);

  return (
    <div className='settings'>
      <Box>
        <Button component={NavLink} to={'/settings/1'} variant={'outlined'}>Начать</Button>
      </Box>
      <RouteAnimation itemsRoutes={itemsRoutes}>
        <>{routes}</>
      </RouteAnimation>
    </div>
  )
};

Example 2

const mainRoutes: RouteObject[] = [
  { path: '/*', element: <Home /> },
  { path: CONST_ROUTES_PRIVATE.PAGE_POSTS, element: <Posts /> },
  { path: CONST_ROUTES_PRIVATE.PAGE_SETTINGS + '/*', element: <Settings /> }
]

export function App() {
  const location = useLocation();
  const routes = useRoutes(mainRoutes, location);

  return (
    <div className={'content_app'} style={{ position: 'relative' }} >
      <Container sx={{ py: 1, position: 'relative' }}>
        <RouteAnimation itemsRoutes={mainRoutes}  mode='slide' animation='slide' typeAnimation='no-destroy' isFadeSlide={true}  >
          <>{routes}</>
        </RouteAnimation>
      </Container>
    </div>
  )
}
  

// Home
const RenderCard = (params) => {
  return (
    <Card sx={{width: 200}}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            Lizard
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lizards are a widespread group of squamate reptiles, with over 6,000
            species, ranging across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  )
}

const itemsHomeRoutes: RouteObject[] = [
  {
    index: true,
    element: (
      <Box>
        <Button variant={'outlined'} component={NavLink} to={CONST_ROUTES_PRIVATE.PAGE_HOME + '1'}>Вперёд</Button>
        <Box sx={{mt: 2, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>
          <RenderCard />
          <RenderCard />
          <RenderCard />
        </Box>
      </Box>
    ),
    handle: {
      parentRelation: CONST_ROUTES_PRIVATE.PAGE_HOME // home = /
    },
  },
  {
    path: '/1',
    element: (
      <Box>
        <Button variant={'outlined'} component={NavLink} to={CONST_ROUTES_PRIVATE.PAGE_HOME}>Назад</Button>
        <Button variant={'outlined'} component={NavLink} to={CONST_ROUTES_PRIVATE.PAGE_HOME + '2'}>Вперёд</Button>
        <p>
          Страница расширенной 1
        </p>
      </Box>
    ),
    handle: {
      parentRelation: CONST_ROUTES_PRIVATE.PAGE_HOME
    }
  },
  {
    path: '/2',
    element: (
      <Box>
        <Button variant={'outlined'} component={NavLink} to={CONST_ROUTES_PRIVATE.PAGE_HOME + '1'}>Назад</Button>
        <p>
          Страница расширенной 2
        </p>
      </Box>
    ),
    handle: {
      parentRelation: CONST_ROUTES_PRIVATE.PAGE_HOME
    }
  },
]


const HomeMemo = () => {
  const location = useLocation();
  const routes = useRoutes(itemsHomeRoutes, location);

  return (
    <div className='home'>
      <h1>Home</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolore, molestiae accusamus saepe qui minima esse suscipit quis possimus consequatur numquam.
      </p>
      <Box sx={{ mt: 2 }}>
        <RouteAnimation itemsRoutes={itemsHomeRoutes} mode='slide' typeAnimation='total-forward' >
          <>{routes}</>
        </RouteAnimation>
      </Box>
    </div>
  )
};

export const Home = React.memo(HomeMemo);

<!-- typeAnimation total-forward    -->
<!--  next slide + 1  -->
<div class="slide-routes slide css-18xklii">
  <div class="item MuiBox-root css-0 forward-enter forward-enter-active"></div>
  <div class="item MuiBox-root css-0 forward-exit forward-exit-active"></div>
  <div class="item MuiBox-root css-0 forward-exit forward-exit-active"></div>
   <!-- total mount item -->
</div>
<!-- back slide -1 -->
<div class="slide-routes slide css-18xklii">
  <div class="item MuiBox-root css-0 back-enter back-enter-active"></div>
   <!-- total unmount item -->
</div>

API

Common props

| Prop | Type | |------------|--------------------------------------| |onExit |CSSTransitionProps['onExit'] | |onExited |CSSTransitionProps['onExited'] | |onExiting |CSSTransitionProps['onExiting'] | |onEnter |CSSTransitionProps['onEnter'] | |onEntered |CSSTransitionProps['onEntered'] | |onEntering|CSSTransitionProps['onEntering'] |
|onSlideEnd|used if no-destroy or total-forward |
|sx |mui SxProps|
|sxItem |mui SxProps|

RouteAnimation mode = 'slide' (default 'fade')

| Prop | Type | Default | Description | |---------------|---------|---------|--------------------------------------------------------------------------------------------------| |animation |string |'slide'| Animation effect type, 'slide', 'vertical-slide', or 'rotate' | |isFadeSlide |boolean|'false'| Change visual animation 'slide', 'vertical-slide' | |duration |number |200 | transition-duration ms | |timing |string |'ease' | transition-timing-function, one of 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear'| |typeAnimation|string |destroy| destroy, no-destroy, total-forward |

EXAMPLE. (Also check out the ExampleComponent components on the home page)

CodeSandbox Route Animation