Bootstrap 模态：侧向滑入和滑出

Question

我正在使用 Bootstrap 的模态进行一系列评论。所以我在一个列表中排列了一堆模态框，并在用户查看了当前一个模态框后显示下一个模态框。

问题：如何更改模态，使当前的模态向左滑出，新的模态从右侧滑入？

我希望这是一个可以应用于这些特定模态的新类。我在网站的其他地方使用了我喜欢 Bootstrap 的默认行为的模式。

任何帮助将不胜感激，谢谢！

编辑

好的，不发布任何代码是愚蠢的，所以这是一个引导：http://www.bootply.com/1BADCJo5FL#

诀窍在于 CSS 标记，在这里您可以使用 right: 25%; 更改默认起始位置 ...

.modal {
  position: fixed;
  top: 0;
  right: 25%;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

...以及它在使用变换显示后如何移动

.modal.in .modal-dialog {
  -webkit-transform: translate(25%, 0);
      -ms-transform: translate(25%, 0);
       -o-transform: translate(25%, 0);
          transform: translate(25%, 0);
}

现在这很有趣：引导程序只有 modal.in 的 CSS 标记，而没有 modal.out。它似乎只是回到了它的来源。我不确定这只是默认的 CSS 行为还是什么......

所以这已经完成了我想要的一半，但是让这个东西移动得更像......我猜是一个旋转木马。

Answer 1

我希望这就是你要找的:)

我刚刚在 jquery 中更改了一些代码。在关闭模式时添加一个名为 close 的类。

$(document).ready(function() {

  $('#show_normal').on('click', function(e) {
    $('#myModal').modal('show');
    $('#myModal').removeClass('out');
  });

  $('#hide_normal').on('click', function(e) {
    $('#myModal').modal('hide');
    $('#myModal').addClass('out');
  });  

});

并在css中添加了一些代码

.modal.fade.out {    
   right: -25%;
   left: auto;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
       -o-transition: opacity 0.3s linear, right 0.3s ease-out;
          transition: opacity 0.3s linear, right 0.3s ease-out;
 }    

你可以在http://www.bootply.com/bz1VioVHpI看到现场演示