Question

有人可以使用animate.css帮助我使用B3模态动画吗？在此处查看animate.css：https://github.com/daneden/animate.css

当模态打开时我已经包含'bounceInLeft'，并且我想在关闭时使用'bounceOutRight'。

这是我的jsfiddle：http://jsfiddle.net/shan12/25WHg/

HTML：

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JS：

$('#myModal').addClass('animated bounceInLeft');

亲切的问候。

Answer 1

您可以尝试以下方法：

$("#myModal").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function (e) {
  if (e.originalEvent.animationName == "bounceOutRight") {
    $(".modal-backdrop").remove();
    $(".modal").remove();
  }
});

$('#myModal').on('hide.bs.modal', function (e) {
  $('#myModal').addClass('bounceOutRight');
  return e.preventDefault();
});

这是JSFIDDLE

Answer 2

它更像是一种解决方法。

var hideDelay = true;
$('#myModal').on('hide.bs.modal', function(e) {
  if (hideDelay) {
    $('.modal-content').removeClass('animated bounceInLeft').addClass('animated bounceOutRight');
    hideDelay = false;
    setTimeout(function() {
      $('#myModal').modal('hide');
      $('.modal-content').removeClass('animated bounceOutRight').addClass('animated bounceInLeft');
    }, 700);
    return false;
  }
  hideDelay = true;
  return true;
});

将添加的动画类检查为'。modal-content'，而不是'＃myModal'。

这是小提琴http://jsfiddle.net/25WHg/43/

模态关闭动画

2 个答案: