如何从页面左右滑动模态窗口

Question

我希望有两个模式窗口隐藏，并切换他们从左边滑进来，另一个从右边滑进来。在我创建的小提琴，左，右，模态窗口正确地对齐左和右的页面，然而。左边的模态从右边滑进来，而不是从左边的边缘滑出来。小提琴在这里

当我试图让左边的模态窗口从左边滑行时，我就失去了滑出效果。

#rightModal .modal-dialog-slideout {
  min-height: 100%;
  margin: 0 0 0 auto;
  background: #fff;
}

#rightModal .modal.fade .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(100%, 0)scale(1);
  transform: translate(100%, 0)scale(1);
}

#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  display: flex;
  align-items: stretch;
  -webkit-box-align: stretch;
  height: 100%;
}

#rightModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

#rightModal .modal-dialog-slideout .modal-content {
  border: 0;
}

#rightModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
  height: 69px;
  display: block;
}

#rightModal .modal-dialog-slideout .modal-header h5 {
  float: left;
  color: blue;
}

#leftModal .modal-dialog-slideout {
  min-height: 100%;
  margin: 0 auto 0 0;
  background: #fff;
}

#leftModal .modal.fade .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(-100%, 0)scale(1);
  transform: translate(-100%, 0)scale(1);
}

#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  display: flex;
  align-items: stretch;
  -webkit-box-align: stretch;
  height: 100%;
}

#leftModal .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

#leftModal .modal-dialog-slideout .modal-content {
  border: 0;
}

#leftModal .modal-dialog-slideout .modal-header,
.modal-dialog-slideout .modal-footer {
  height: 69px;
  display: block;
}

#leftModal .modal-dialog-slideout .modal-header h5 {
  float: left;
  color: red;
}

如何保持滑出效果，并保持两个模态的位置？

Answer 1

当没有显示模态时，您需要在.modal-dialog -100%上翻译x-axis。

该模型在显示时具有.show类。使用:not() CSS伪类选择处于隐藏状态的模式。

:not() CSS伪类表示不匹配选择器列表的元素.由于它阻止了特定项的选择，因此被称为否定伪类.- https://developer.mozilla.org

#leftModal.modal.fade:not(.show) .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(-100%,0)scale(1);
    transform: translate(-100%,0)scale(1);
}

https://jsfiddle.net/r25uphq3/