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

Question

我希望隐藏两个模式窗口，并将它们切换为从左侧滑入，另一个从右侧滑入。 然而，在我创建的 fiddle 中，左侧和右侧模态窗口与页面的左侧和右侧正确对齐。左侧模态从右侧滑入，而不是从左边距“滑出”。 Fiddle Here

当我尝试让左侧模态窗口从左侧滑动时，我失去了滑出效果。

#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

当模态未显示时，您需要在x轴上平移.modal-dialog -100%。

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

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. - 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/