56

目前模态下滑效果是通过将fade类添加到模态div来完成的。是否可以通过更改css将效果更改为从侧面（或从底部）滑动？我在网上找不到任何关于如何做到这一点的信息，而且我自己也没有足够的 css 来做到这一点。

html:

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

3 回答 3

118

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)

如果你想混合和匹配不同的滑动方向，你可以为模态分配一个像“左”这样的类......

<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);
}
于 2014-09-08T06:21:53.967 回答
28

此信息已过时。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%;
}

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

于 2012-11-20T05:40:33.813 回答
8

这适用于正在寻找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;
    }
  }
}
于 2017-05-14T18:06:31.107 回答