React Hover Navbar Transition-CodePudding

I'm currently improving a click to open navbar into a hover bar for a project. onMousteEnter and onm ouseLeave works fine, navbar opens and closes on mouse hover. However my problem is that I can't add transition to it in css.. I am not sure what the problem could be.

My sidebar component:

export const Sidebar = props => {
  const { open, modules } = props;

  const onm ouseEnter = useCallback(() => props.setMainMenuOpen(!open), []);
  const onm ouseLeave = useCallback(() => props.setMainMenuOpen(open), []);

  return (
    <div
      open={setMainMenuOpen}
      onm ouseEnter={onMouseEnter}
      onm ouseLeave={onMouseLeave}
      className={`navigation ${open ? 'open' : ''}`}
      data-test-id="navigation"
      tabIndex="-1"
    >
      {modules.map(module => (
        <SidebarItem key={module.id} module={module} />
      ))}
    </div>
  );
};

.navigation {
    transition: all 1s ease-in;
}

(it obviously has more css but not necessary to include. Position, margin, padding, z-index, etc. everything works apart from transition)

I am trying to add the transition to the navigation className but it doesn't work. Tried adding to &.open{} as well but still nothing...

What I am trying to achieve is that the navbar has an open and close transition for smoother user experience.

CodePudding user response：

I think you need to add visibility: 1 when it's opened and visibility: 0, otherwise. In that case your transition property would be applied to visibility of element.

CodePudding user response：

className={open ? 'navigation' : ''}