反应悬停导航栏过渡

Question

我目前正在改进点击打开导航栏到项目悬停栏的功能。 onMousteEnter 和 onMouseLeave 工作正常，导航栏在鼠标悬停时打开和关闭。但是我的问题是我无法在 css 中添加过渡。我不确定问题出在哪里。

我的边栏组件：

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

  const onMouseEnter = useCallback(() => props.setMainMenuOpen(!open), []);
  const onMouseLeave = useCallback(() => props.setMainMenuOpen(open), []);

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

.navigation {
    padding-top: 10px;
    margin-bottom: 0;
    margin-left: 0;
    background: $color-sidebar-navigation-background;
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1303;

    &.open {
        z-index: 1303;
        height: 100%;
        width: 6 * $navigation--width;
        box-shadow: 0 3px 14px 2px rgba(36, 36, 36, 0.12), 0 8px 10px 1px rgba(36, 36, 36, 0.14),
            0 5px 5px -3px rgba(36, 36, 36, 0.2);
    }

（除了转换之外一切正常）

我正在尝试将过渡添加到导航类名，但它不起作用。也尝试添加到 &.open{} 但仍然没有...

我想要实现的是导航栏有一个打开和关闭的过渡，以提供更流畅的用户体验。

Answer 1

我认为您需要添加可见性：打开时为 1，否则为 0。在这种情况下，您的过渡属性将应用于元素的可见性。

Answer 2

类名={打开？ 'navigation' : ''}

Answer 3

如果您尝试向元素的宽度添加过渡，则需要设置元素的初始宽度以及它应该变为的宽度。通常，对于转换，您需要指定要转换的属性的值。在您的情况下，向 .navigation 添加宽度值应该可以使过渡工作。希望这对您有所帮助。

反应悬停导航栏过渡

React Hover Navbar Transition

html

javascript

css

sass

reactjs