Reactjs 显示带有动画的侧边栏菜单

如何解决Reactjs 显示带有动画的侧边栏菜单

我需要一些洞察力。 我尝试构建一个带有动画的侧边栏菜单，当状态为 true 时，它​​会从左侧 -100% 到 100% 全屏显示，当状态为 false 时从 100% 全屏到左侧 -100% 关闭。

状态为真时动画有效，但关闭侧边栏菜单时动画无效。

顺便说一句，如果对此模式有更好的方法，请告诉我。提前谢谢你！

const PhoneNavigation = ({ handleClose,open }) => {
  return (
    <nav className={open ? "show_side_bar" : "close_side_bar"}>
      <span onClick={handleClose}>X</span>
      <ul>
        <li className="subMenu navItem">
          <a href="/">Courses</a>
        </li>
        <li className="navItem">
          <a href="/">Pricing</a>
        </li>
        <li className="navItem">
          <a href="/">Mission</a>
        </li>
        <li className="subMenu navItem">
          <a href="/">About us</a>
        </li>
      </ul>
    </nav>
  );
};

export default PhoneNavigation;

// 样式表

.show_side_bar {
  position: fixed;
  background-color: brown;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  animation: showMenu 2s;
}

.close_side_bar {
  animation: showMenu 2s reverse;
}

@keyframes showMenu {
  from {
    left: -100%;
  }
  to {
    left: 0%;
  }
}

解决方法

这在关闭侧边栏时不起作用，因为动画仅应用于元素的条目。相反，您可以像这样使用过渡：

const PhoneNavigation = ({ handleClose,open }) => {
  return (
    // when open is true,there will be an additional class show_side_bar
    <nav className={open ? "show_side_bar side_bar" : "side_bar"}>
      <span onClick={handleClose}>X</span>
      <ul>
        <li className="subMenu navItem">
          <a href="/">Courses</a>
        </li>
        <li className="navItem">
          <a href="/">Pricing</a>
        </li>
        <li className="navItem">
          <a href="/">Mission</a>
        </li>
        <li className="subMenu navItem">
          <a href="/">About us</a>
        </li>
      </ul>
    </nav>
  );
};

export default PhoneNavigation;

以下 CSS 将使其工作：

.side_bar {
  position: fixed;
  background-color: brown;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  // transition applies to every render,i.e.,adding and removing any class from 
  // the element
  transition : all 2s ease;
  // place it initially at -100%
  transform : translate(-100%);
}
.show_side_bar {
  // when this class is active,sidebar will be visible
  transform : translate(0);
}