Можно ли сделать модный слайд Twitter-ботстрапа со стороны или снизу, вместо того, чтобы сползать вниз?

В настоящее время модальный эффект слайда выполняется добавлением класса fade в модальный div. Можно ли изменить эффект на скольжение со стороны (или снизу) путем изменения css? Я не мог найти какую-либо информацию в Интернете о том, как это сделать, и не знаю, достаточно ли css, чтобы сделать это сам.

HTML:

<div id='test-modal' class='modal fade hide'>
  <div>Stuff</div>
</div>

Ответ 1

Bootstrap 3 теперь использует CSS transform translate3d вместо переходов CSS для лучшей анимации с использованием аппаратного ускорения GPU.

Он использует следующий CSS (без ослабления)

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

Вот CSS, который вы можете использовать для перехода со стороны LEFT

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Обратите внимание на отрицательный селектор. Я заметил, что это необходимо для того, чтобы помешать определению ".modal.in. Modal-dialog". Примечание. Я не являюсь гуру CSS, поэтому, если кто-нибудь может лучше объяснить это, не стесняйтесь:)

Как перемещаться с разных сторон:

top: translate3d(0, -25%, 0)
внизу: translate3d(0, 25%, 0)
left: translate3d(-25%, 0, 0)
right: translate3d(25%, 0, 0)

Если вы хотите смешивать и сопоставлять разные направления слайдов, вы можете назначить класс, как "left" для модального...

<div class="modal fade left">
    ...
</div>

... и затем нацелиться именно на CSS:

.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Fiddle: http://jsfiddle.net/daverogers/mu5mvba0/

БОНУС. Вы можете немного зайти и подскочить под углом:

верхний левый: translate3d(-25%, -25%, 0)
top-right: translate3d(25%, -25%, 0)
внизу слева: translate3d(-25%, 25%, 0)
внизу справа: translate3d(25%, 25%, 0)

UPDATE (05/28/15): я обновил скрипт, чтобы отобразить альтернативные углы

Если вы хотите использовать это в шаблоне LESS, вы можете использовать BS3-префикс mixin (пока он включен)

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}

Ответ 2

Эта информация устарела. Теперь Bootstrap 3 обрабатывает это по-другому. Пожалуйста, см. обновленный ответ, если вы используете более новую версию.

Переход "слайда" фактически обрабатывается бутстрапом css. В частности, он обрабатывается этой частью:

// bootstrap.css

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

Чтобы изменить направление перехода, просто добавьте (в собственную таблицу стилей, потому что bootstrap css будет обновлен в будущих версиях) эти стили. Они перезапишут стили бутстрапа. Чтобы модальный слайд слева, попробуйте:

.modal.fade {
  left: -25%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.fade.in {
  left: 50%;
}

Работа jsfiddle здесь.

Чтобы перейти от правого к левому, поставьте большой положительный процент для модального перехода из и измените место окончательного модального отдыха в соответствующее направление. например .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Пример справа налево.

Внизу к примеру.

Дополнительная информация о Переходы CSS здесь.

Ответ 3

Это для тех, кто ищет решение Bootstrap 4:

HTML

<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneRight">Slide Right Panel</a>

<div class="modal fade modal-right-pane" id="modalSidePaneRight" tabindex="-1" role="dialog" aria-labelledby="sidePaneRightModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h5 class="modal-title" id="sidePaneRightModal"><i class="fi fi-calender"></i> Your Modal Title</h5>
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body bg-primary">
        <h1>Your Content</h1>
      </div>
    </div>
  </div>
</div>

SCSS

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
*******************************/

// Modal Panel: Right
$header-nav-height: 56px;
$modal-height: calc(100vh - #{$header-nav-height});

.modal{
  &.modal-left-pane,
  &.modal-right-pane {
    .modal-dialog {
      max-width: 380px;
      min-height: $modal-height;
    }

    &.show .modal-dialog {
      transform: translate(0, 0);
    }

    .modal-content {
      min-height: $modal-height;
    }
  }
  &.modal-left-pane {
    .modal-dialog {
      transform: translate(-100%, 0);
      margin: $header-nav-height auto 0 0;
    }
  }

  &.modal-right-pane {
    .modal-dialog {
      transform: translate(100%, 0);
      margin: $header-nav-height 0 0 auto;
    }
  }
}