Как сдвинуть модальный windows слева и справа от страницы

Question

Я хочу sh, чтобы два модальных windows были скрыты, и переключать их так, чтобы они скользили слева, а еще одну - справа. Однако в созданной мной скрипке левая и правая модальные windows выравниваются правильно по левому и правому краям страницы. Левый модальный элемент скользит внутрь справа, а не «выходит» из левого поля. 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;
}

Как сохранить слайд -out, и сохранить позиции двух модальных окон?

Answer 1

Вам необходимо перевести .modal-dialog -100% на x-axis, когда модальное окно не отображается.

Модальное окно имеет класс .show, когда оно отображается. Используйте псевдокласс :not() CSS для выбора модального окна в его скрытом состоянии.

Псевдокласс :not() CSS представляет элементы, которые не соответствуют списку селекторов. Поскольку он предотвращает выбор определенных c элементов, он известен как псевдокласс отрицания. - 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/