jquery - Bootstrap 4模态上的Animate.css

我正在使用Animate.css为Bootstrap 4 Modal设置动画。我分别使用rubberBand和bounceOutLeft进行打开和关闭。

这是我的代码：

$('#contactModal').on('show.bs.modal', () => {
        $('.modal').animateCss('rubberBand');
}).on('hidden.bs.modal', function (event) {
        $('.modal').animateCss('bounceOutLeft');
});

开头（rubberBand）工作正常，但关闭bounceOutLeft无效。我也尝试了这段代码，但是它也不起作用：

$('.modal .close').click(() => {
        $('.modal').animateCss('bounceOutLeft');
});

请帮忙。谢谢。

最佳答案

从按钮中排除引导程序属性以打开和关闭模型：

的HTML

<button id="openmodal" type="button" class="btn btn-outline-warning btn-lg btn-lg-rounded btn-lg-min-width">
  Contact Me
</button>

<button id="btnclosemodel" type="button" class="close" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>

自定义脚本以显示和隐藏模式以解决问题：

JS

  // Hide the Modal after the animation
  $("#btnclosemodel").click(function() {
    $('#contactModal.modal').animateCss('bounceOutLeft', function() {
      $("#contactModal").modal("hide");
    });
  });

  //show the Modal and then animate
  $("#openmodal").click(function() {
    $("#contactModal").modal("show");
    $('#contactModal.modal').animateCss('rubberBand');
  });
});