CSS 淡出过渡

Question

我用CSS和jquery做了一个模态，淡入的过渡工作得很好，但我似乎不知道如何做，所以当它淡出时它有一个过渡也回到1.4。

问题是模态消失得太快了。

现场演示：http://79.179.201.217/

这是我的jquery：

function checkModal()
    {
        if(body.attr("active-modal") != undefined) {
            closeModal(body.attr("active-modal"));
        }
    }
    function closeModal(modal)
    {
        $("#" + modal).find('.modal-header').first().remove();
        $("#" + modal).removeClass("modal-visible");
        body.removeAttr("active-modal", modal);
        body.unbind('click', onDocumentClick);
    }
    function openModal(modal)
    {
        checkModal();
        $("#" + modal).find(".modal-container").prepend('<div class="modal-header"><a href="#" data-toggle="' + modal + '" class="modal-close">Close</a></div>');
        $("#" + modal).addClass("modal-visible");
        body.attr("active-modal", modal);
        body.bind('click', onDocumentClick);
    }
    $(document).keyup(function(e) {
        if (e.keyCode == 27) { 
            checkModal();
        }
    });
    function onDocumentClick (e) {
        if ($(e.target).is('.modal')) {
            e.preventDefault();
            checkModal();
        }
    }

    $(".modal-open").click(function(event) {
        event.preventDefault();
        var modalToOpen = $(this).attr("data-toggle");
        openModal(modalToOpen);
    });
    $(document).on('click', '.modal-close', function(e) {
        event.preventDefault();
        var modalToClose = $(this).attr("data-toggle");
        closeModal(modalToClose);
    });

我的网页：

<div class="modal" id="register-modal">
        <div class="modal-container">
            <div class="modal-content">
                    Register modal!
            </div>
        </div>
    </div>

打开模态的链接：

<li><a href="#" data-toggle="register-modal" class="modal-open">Register</a></li>

.CSS：

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000000;
    transition: opacity .2s linear;
    transition: visibility .2s linear;
    transition: transform .2s linear;
    visibility: hidden;
    transform: scale(1.4);
    opacity: 0;
}
.modal-close {
    display: block;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    position: absolute;
    top: 6px;
    right: 20px;
}
.modal-content {
    display: block;
    margin-top: 10px;
}
.modal-container {
    max-width: 500px;
    width: 80%;
    margin: 230px auto;
    position: relative;
    border: 1px solid #eee;
    background-color: #eee;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);
}
.modal.modal-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
}

Answer 1

你不能过渡visibility，所以当你有visibility:hidden时.modal它会消失而不过渡。您应该只使用opacity .

您还需要合并您的过渡（否则，将仅使用最后一个）：

transition: opacity .2s linear, transform .2s linear;

Answer 2

visibility不是

transform属性。您最好在此处使用关键帧动画。