Animate.css On Bootstrap 4 Modal

Question

我正在使用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');
});

请帮忙。谢谢。

Answer 1

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

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');
  });
});

Answer 2

这是我的第一篇文章，对不起，如果我没有正确发布。

使用bootstrap模态事件：

HTML

<div id="some-modal" class="modal animated" tabindex="-1" role="dialog">
   ...
</div>

JS

// Different effects for showing and closing modal
let fadeIn = 'rollIn';
let fadeOut = 'rubberBand';

// On show
$('#some-modal').on('show.bs.modal', function () {
    $(this).removeClass(fadeOut);
    $(this).addClass(fadeIn);
});

// On closing
$('#some-modal').on('hide.bs.modal', function (e) {
    let $this = $(this);

    // Check whether the fade in class still exists in this modal
    // if this class is still exists prevent this modal
    // to close immediately by setting up timeout, and replace
    // the fade in class with fade out class.
    if ($this.hasClass(fadeIn)) {
        $this.removeClass(fadeIn);
        $this.addClass(fadeOut);
        e.preventDefault();

        setTimeout(function () {
            $this.modal('hide');
        }, 1000); // the default delays from animate.css is 1s
    }
});

您可能希望使用某个array / obj变量替换硬编码超时。