如何使用 Blueprint 3.0 Drawer 作为左侧导航？

Question

我可以通过设置样式 left:0 使抽屉向左移动，但是关闭和打开的动画发生在右侧。下面是一段代码。请帮助解决动画问题。

<Drawer style={{ left: '0', transition: 'all 0.1s' }} 
isOpen={isDrawerOpen} 
size={'250px'} 
usePortal={true} 
hasBackdrop={true} 
canOutsideClickClose={true} 
onClose={() => toggleDrawer(false)} 
>

Answer 1

如果有人还在寻找解决方案，作为在此道具发布之前的快速修复，您可以像这样使用 CSS "hack"：

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear {
  transform: translateX(-100%);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-enter-active, 
.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-appear-active {
  transform: translateX(0);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical).bp3-overlay-exit {
  transform: translateX(0);
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical):not(.bp3-reversed).bp3-overlay-exit-active {
  transform: translateX(-100%);
  transition-property: transform;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 1, 0.75, 0.9);
  transition-delay: 0;
}

.your-custom-class-for-drawer.bp3-drawer:not(.bp3-vertical) {
  left: 0;
}

并且只需将 .your-custom-class-for-drawer 替换为您左侧打开的抽屉的一些 class 名称，如果您不想要任何自定义 class 您可以在没有它的情况下全部编写，但是然后所有抽屉将从左到右显示，这样您就可以使用简单的 class 名称模拟反向行为。

如何使用 Blueprint 3.0 Drawer 作为左侧导航？

how to use Blueprint 3.0 Drawer to use as left sidenav?

css

blueprint

reactjs

blueprintjs