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

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

注意否定选择器.我注意到这对于保持".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)

更新(2015年5月28日):我更新了小提琴以显示替代角度

如果你想在LESS模板中使用它,你可以使用BS3的供应商前缀mixin(只要它包括在内)

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

Answer 2

此信息已过时.Bootstrap 3现在处理不同.如果您使用的是较新版本,请查看更新的答案.

"滑入"转换实际上是由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%;
}

要更改转换方向,只需添加(在您自己的样式表中,因为引导程序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过渡这里.

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