Animate.css 在 Bootstrap 4 模态

Question

我正在使用 Animate.css 制作 Bootstrap 4 模态动画。我使用 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

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

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

这是我的第一个 post，如果我 post 不正确，请见谅。

使用 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 变量替换硬编码超时。

Answer 3

对于 animate.css 4.1.0 版，我是这样操作的：

在模态中：

<div id="userDetailsModal" class="modal fade animate__animated animate__rotateInUpRight animate__faster" tabindex="-1"
    role="dialog"  aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">User Details</h5>
                <button type="button" class="close close-icon" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
<div class="modal-body">
....
<div class="modal-footer">
 <button id="closemodalclass" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

并使用下面的 jquery 我可以为模态的 open/close 动作设置动画。这里我们需要添加和删除类。在这里，我在两个按钮上都应用了关闭动画。模态窗口右上角（x 图标）和页脚中的另一个常规按钮。

<script>
$('#closemodalclass').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rotateInUpRight").addClass("animate__rollOut");
});
    
$('.open-modal-btn').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rollOut").addClass("animate__rotateInUpRight");
});

$('.close-icon').on('click', function() {
    $("#userDetailsModal").removeClass("animate__rotateInUpRight").addClass("animate__rollOut");
});
</script>

Animate.css 在 Bootstrap 4 模态

Animate.css On Bootstrap 4 Modal

jquery

bootstrap-modal

bootstrap-4

animate.css