Question

目前，通过将fade类添加到模态div来完成模态滑动效果。是否可以通过更改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);
}

注意否定选择器。我注意到这是保持＆＃34; .modal.in .modal-dialog＆＃34;干扰的定义。 注意：我不是CSS大师，所以如果有人能够更好地解释这一点，请随意：）

如何从不同方面滑入：

top：translate3d(0, -25%, 0)
bottom：translate3d(0, 25%, 0)
left：translate3d(-25%, 0, 0)
右：translate3d(25%, 0, 0)

如果您想要混合和匹配不同的幻灯片方向，您可以指定一个类似“左”和“左”的类。模式...

<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/

BONUS - 你可以稍稍滑动并以一定角度滑入：

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

更新（2015年5月28日）：我更新了小提琴以显示替代角度

如果你想在LESS模板中使用它，你可以使用BS3的供应商前缀mixin（只要包含它）

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

Answer 2

此信息已过时。 Bootstrap 3现在处理不同。如果您使用的是较新版本，请参阅the updated answer。

“滑入”转换实际上是由bootstrap 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 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;
    }
  }
}

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

3 个答案:

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