Bootstrap 4模态上的Animate.css

Question

我正在使用Animate.css来动画Bootstrap 4模态。我正在使用 Rubband 和 BounceOutLeft 分别用于开放和关闭。

这是我的代码：

$('#contactModal').on('show.bs.modal', () => {
        $('.modal').animateCss('rubberBand');
}).on('hidden.bs.modal', function (event) {
        $('.modal').animateCss('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

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

使用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
    }
});

您可能需要用一些数组/obj变量替换硬码超时。

Answer 3

with Animate.css ver 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，我可以对模态的开放/关闭动作进行动画。在这里，我们需要添加和删除类。在这里，我在两个按钮上都应用了密切的动画。模态的顶部角(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>