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

df = data.frame("var1" = c(5,10,15), "var2" = c(20,40,60))
#the 'summary' command gives you some statistical parameters based on the column
summary(df)
#with the 'apply' command you can addresses the rows. 
#in this example you get the mean of each row: 
apply(df, 1,mean)

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

JS

<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>

Answer 2

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

使用引导程序模式事件：

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可以对模式的打开/关闭动作进行动画处理。在这里，我们需要添加和删除类。在这里，我在两个按钮上应用了关闭动画。模态右上角的一个（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 On Bootstrap 4 Modal

3 个答案: