jquery - Bootstrap 模态 : sideway slide in and out

Question

我正在使用 Bootstrap 的模式来进行一系列评论。因此，我将一堆模态放入列表中，并在用户查看当前模态后显示下一个模态。

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

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

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

编辑

好吧，不发布任何代码是愚蠢的，所以这是一个 bootply: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);
}

现在这很有趣:bootstrap 仅具有 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 上观看现场演示