javascript - 如何让模态弹出窗口以慢速打开和关闭？

Question

我有一个带有以下实现的模态弹出窗口:

这是 JSfiddle:https://jsfiddle.net/6m10g8kh/4/

HTML:

 <div id="modalDeliveryAddress" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeModal('modalDeliveryAddress');">&times;</span>
                <h2>Your new delivery address</h2>
            </div>
            <div class="modal-body">
                <div class="delivery-popup clearfix">
                    <div class="delivery-container">
                        <div style="padding-top:25px;"></div>
                        <input type="text" name="floor_no" class="form-control" id="floor-info" placeholder="Floor/Unit No.">

                        <input type="text" name="block_no" class="form-control" id="block-info" placeholder="Block No.">

                        <input type="text" name="street_name" class="form-control" id="street-info" placeholder="Street Name">

                        <input type="text" name="zip_code" class="form-control bfh-phone" data-format="ddddd" id="zip_info" maxlength="5" placeholder="Zip Code">
                        <div style="padding-top:25px;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <a class="btn cancelBtn pull-left" href="#" data-dismiss="modal" id="btnCancel1" onclick="closeModal('modalDeliveryAddress');">Cancel</a>
                <a id="submitAdd" class="btn continue pull-right" href="#" name="submitAdd">Submit</a>

            </div>
        </div>

    </div>

JS:

function openModal(modal_Id) {
        var modalId = $('#' + modal_Id);
            modalId.show();
}

function closeModal(modal_Id) {
        var modalId = document.getElementById(modal_Id);
        modalId.style.display = "none";
}

window.onclick = function (event) {

        switch (event.target.id) {
            case 'modalDeliveryAddress':
                document.getElementById(event.target.id).style.display = "none";
                break;
            case 'modalCCDetails':
                document.getElementById(event.target.id).style.display = "none";
                break;
            case 'modalDlvSchedule':
                document.getElementById(event.target.id).style.display = "none";
            default:
                break;
        }
    }

CSS:

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;

}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 92%;
    left:14px;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border-radius: 16px 16px 0px 0px !important;
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}


a.cancelBtn{
    font-size: 20px !important;
    /* width: 300px;
    height: 45px; */
    background-color: #ffffff;
    border: solid 1px #e7e9ea;
    color:#ed1a3d;
    cursor: pointer !important;
    text-align: center;
    display: inline-block;
    width: 50%;
    height: auto;
    line-height: 40px;
}

a.continue, a.continue:visited {
    font-size: 20px !important;
    /* width: 300px;
    height: 45px; */
    background-color: #ed1a3d;
    border: solid 1px #e7e9ea;
    color:#ffffff;
    cursor: pointer !important;
    text-align: center;
    margin-left: 0px !important;
    height: auto;
    line-height: 40px;
    width: 166px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 20px 14px 36px;
    background-color: #00b9e3;
    color: white;
    border-radius: 16px 16px 0px 0px !important;
    text-align: center;
    height:60px;
}

.modal-header h2{
    font-size: 20px !important;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 0px;
    background-color: white;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

现在，我有两个问题:

1. 每当模态框打开时，它都会以特定的速度从底部打开。我需要的是，降低打开这个弹窗的速度。
2. 此外，无论何时我关闭弹出窗口，它都不会像打开时那样动画，也就是说，它不会从上到下关闭，而是立即关闭。如何保持以与打开弹出窗口相同的速度关闭弹出窗口的无缝行为。

我尝试了什么？

我尝试将属性 transitions: opacity 1.5s linear 放在 .modal{} css 中，但它似乎不起作用

注意:我在页眉中包含了所有必需的 jquery 库、bootstrap 库。

我也尝试过 fadeIn 和 fadeOut 方法，但它没有给我想要的行为，而是我的模态框在打开时闪烁

Answer 1

关于标记的重复问题，我通过扩展使用fadeIn/fadeOut('slow') 的解决方案找到了解决方案。以下是实现它所需的细节:

CSS:

.modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 1.2s;
    }

    /* Modal Content */
    .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 92%;
        left:14px;
        -webkit-animation-name: slideIn;
    -webkit-animation-duration: 1s;
        border-radius: 16px 16px 0px 0px !important;
    }

在上面的 css 中，我在 .modal 类和 -webkit-animation-duration: 1s 上调整了 -webkit-animation-duration: 1.2s; ; 在 .modal-content 类中

要显示和隐藏我在 JS 代码段下面使用的模态框:

JS

<script>
    function openModal(modal_Id) {
            var modalId = $('#' + modal_Id);
                modalId.fadeIn('slow');
     /* modalId.show() */;
    }

    function closeModal(modal_Id) {
    var modalId = $('#' + modal_Id);
                modalId.fadeOut('slow');
                /* modalId.hide() */;
    }

    window.onclick = function (event) {

            switch (event.target.id) {
                case 'modalDeliveryAddress':
                   $('#' + event.target.id).fadeOut('slow'); 
                    break;
                default:
                    break;
            }
        }
    </script>

完整的工作实现可在此处获得: https://jsfiddle.net/2cwwe0p4/1/