是否可以从侧面或底部制作 Twitter Bootstrap 模式滑动而不是向下滑动？

Question

目前模态下滑效果是通过在模态div中添加fade类来实现的。是否可以通过更改css将效果更改为从侧面（或从底部）滑动？我在网上找不到任何有关如何执行此操作的信息，并且我自己也没有足够的 css 来执行此操作。

html:

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

Answer 1

Bootstrap 3 现在使用 CSS 变换 translate3d 而不是 CSS 过渡，以使用 GPU 硬件加速获得更好的动画效果。

它使用以下 CSS（无缓动）

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

这是您可以用来从左侧滑入的 CSS

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

注意否定选择器。我注意到这是防止“.modal.in .modal-dialog”定义受到干扰所必需的。 注意：我不是 CSS 专家，所以如果有人能更好地解释这一点，请随意:)

如何从不同侧面滑入：

• 顶部：translate3d(0, -25%, 0)
• 底部：translate3d(0, 25%, 0)
• 左：translate3d(-25%, 0, 0)
• 右：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);
}

小提琴：http://jsfiddle.net/daverogers/mu5mvba0/

奖励 - 你可能会有点滑稽并以一个角度滑入：

• 左上角：translate3d(-25%, -25%, 0)
• 右上角：translate3d(25%, -25%, 0)
• 左下角：translate3d(-25%, 25%, 0)
• 右下：translate3d(25%, 25%, 0)

更新 (05/28/15)：我更新了小提琴以显示替代角度

---

如果你想在 LESS 模板中使用它，你可以使用 BS3 的 vendor-prefix mixin（只要它包含在内）

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

Answer 2

此信息已过时。 Bootstrap 3 现在以不同的方式处理这个问题。如果您使用的是较新版本，请查看the updated answer。

“滑入”过渡实际上是由引导 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%;
}

要更改过渡方向，只需添加（在您的自己的样式表中，因为引导 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 here.

要从右到左转换，请为模态转换提供一个大的正数百分比，并将模态的最终静止位置更改为相应的方向。 例如.modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Right to left example.

Bottom to top example.

关于CSS Transitions here的更多信息。

Answer 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;
    }
  }
}