Adding transition to the activeclass in react router v6

Admin 1
Viewed 130

In my navbar i added an activeclass so in case a link was chosen a line at the bottom of the link is displayed , im trying to add a transition property to this class change , preferably the line animating from one link to another , i tried it the way below but its not working , i appreciate your feedback.

this is the css part

page: {
    marginLeft: theme.spacing(3),
    textTransform: "capitalize",
    color: theme.palette.text.primary,
    textDecoration: "none",
    borderBottom: "none",
    transition: "borderBottom 2s ease",
  },

  activepage: {
    marginLeft: theme.spacing(3),
    textTransform: "capitalize",
    color: theme.palette.text.primary,
    textDecoration: "none",
    borderBottom: "3px solid #000",
  },

and below is the jsx part

 <Box className={classes.pages}>
          {pages.map((page) => (
            <NavLink
              to={page.path}
              key={page.name}
              className={({ isActive }) =>
                isActive ? `${classes.activepage}` : `${classes.page}`
              }
            >
              {page.name}
            </NavLink>
          ))}
        </Box>
navbar react-router material-ui reactjs css-transitions
1 Answers

I think you want your default class to remain applied so there's something to transition from. You want to add your active class to the applied CSS, not replace it.

Example:

<NavLink
  to={page.path}
  key={page.name}
  className={({ isActive }) =>
    [
      classes.page,
      isActive ? classes.activepage : null
    ]
      .filter(Boolean)
      .join(" ")
  }
>
  {page.name}
</NavLink>

Update

It appears you also need to apply a default border-bottom style to transition from, anything other than none.

Example:

page: {
  marginLeft: theme.spacing(3),
  textTransform: "capitalize",
  color: theme.palette.text.primary,
  textDecoration: "none",
  borderBottom: "3px solid transparent",
  transition: "borderBottom 2s ease",
},
activepage: {
  borderBottom: "3px solid #000",
},

Edit adding-transition-to-the-activeclass-in-react-router-v6

user_86908570
Related