是否有可能从侧面或底部，而不是滑下来的Twitter Bootstrap模式幻灯片？
目前模态下滑效果是通过添加fade类到模态的div。 是否有可能通过改变CSS来改变从侧面（或从底部）滑动的效果？ 我无法在网上find任何关于如何做到这一点的信息，而且我自己也不知道怎么做。
HTML：
<div id='test-modal' class='modal fade hide'> <div>Stuff</div> </div>
引导3现在使用CSS转换translate3d，而不是CSS转换，使用GPU硬件加速更好的animation。
它使用下面的CSS（sans easing）
.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); }
注意否定select器。 我注意到这是保持“.modal.in .modal-dialog”定义不受干扰的必要条件。 注意：我不是一个CSS大师，所以如果有人能更好地解释这一点，请随时:)
如何从不同侧面滑入：
- 顶部：
translate3d(0, -25%, 0) - 底部：
translate3d(0, 25%, 0) - left：
translate3d(-25%, 0, 0) - right：
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/
奖金 – 你可以得到一个小小的滑动，并在一个angular度滑入：
- 左上angular：
translate3d(-25%, -25%, 0) - 右上：
translate3d(25%, -25%, 0) - 左下：
translate3d(-25%, 25%, 0) - 右下：
translate3d(25%, 25%, 0)
更新（15/28/15）：我更新了小提琴显示替代angular度
如果你想在LESS模板中使用它，你可以使用BS3的供应商前缀mixin（只要包含它）
.modal.fade:not(.in) .modal-dialog { .translate3d(-25%, 0, 0); }
这些信息已经过时了。 引导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% }; .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };
从右到左的例子。
从下到上的例子。
更多关于CSS Transitions的信息
这是寻找Bootstrap 4解决scheme的人：
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">×</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; } } }
感谢Syed在Bootstrap 4中为模态popup窗口提供了自定义animation。我一直在试图searchBootstrap 4的解决scheme，很幸运地find了Syed的解决scheme，它的工作非常棒。他从左右方向提供了模态animation。 现在我已经调整了从“底部”到“顶部”的animation相同的代码。 这些animation将模仿ALERTIFY JS JS Modalanimation。
再次感谢Syed提供的绝妙解决scheme。 这个解决scheme对于像我这样从不同方向searchBootstrap Modal Animation的用户来说非常有用。
创build模式popup式animation从“底部”到“顶部”
/******************************* * MODAL from BOTTOM OF THE BROWSER * Add ".modal-bottom-pane" in modal parent div, after class="modal". *******************************/ // Modal Panel: 'Bottom' to 'Top' CSS .modal.modal-bottom-pane .modal-dialog { max-width: 380px; min-height: calc(100vh - 56px); } .modal.modal-bottom-pane.show .modal-dialog { transform: translate(0, 0); } .modal.modal-bottom-pane .modal-content { min-height: calc(100vh - 56px); } .modal.modal-bottom-pane .modal-dialog { transform: translate(0, 100%); margin: 56px 0 0 auto; }
<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneBottom">Slide Bottom Panel</a> <div class="modal fade modal-bottom-pane" id="modalSidePaneBottom" tabindex="-1" role="dialog" aria-labelledby="sidePaneBottomModal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-0"> <div class="modal-header"> <h5 class="modal-title" id="sidePaneBottomModal"><i class="fi fi-calender"></i> Your Modal Title</h5> <button type="button" class="close" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body bg-primary"> <h1>Your Content</h1> </div> </div> </div> </div>
