模态关闭动画答案

【问题标题】：Modal Close Animation模态关闭动画
【发布时间】：2014-06-24 23:34:07
【问题描述】：

有人可以帮助我使用 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');

亲切的问候。

【问题讨论】：

标签： jquery css modal-dialog twitter-bootstrap-3 css-transitions

【解决方案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

【讨论】：

【解决方案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/

【讨论】：