React-创建从屏幕外打开的侧边栏导航菜单

Question

我有一组样式化的组件，这些组件基本上构成了侧边栏导航菜单。组件本身看起来像这样：

const Sidebar = ({ children }) => (
  <div className={styles.sidebar}>
    {children}
  </div>
);

我想将其包装在另一个控制Transition组件的组件中，称为Sidebar-

1）从屏幕外到屏幕是什么方向

2）菜单是打开还是关闭

3）我还希望确定一种使用过渡平滑显示或关闭菜单的方法，而不只是使菜单出现或消失。

并且应该使用传递到Transition组件中的道具来处理它，以便可以适当地触发它。

如果任何人有如何入门的任何指点，将不胜感激-在研究过程中，我找不到与我的情况有关的太多信息。我最好的主意是某种程度上（我目前不确定如何）有条件地应用CSS样式来控制菜单的位置（styles.left，styles.right等），但是我不确定如何处理菜单的转换。