1

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

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

1 回答 1

0

如果有人仍在寻找解决方案，那么在此道具发布之前作为快速修复，您可以像这样使用 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你的左打开抽屉的一些类名替换，如果你不想要任何自定义类，你可以在没有它的情况下编写它，但是所有抽屉都会从左到右显示，这样你就可以用一个简单的模拟反向行为班级名称。

于 2019-03-06T03:09:43.680 回答