Question

我使用CSS和jquery制作了一个模态，淡入淡出的过渡工作非常精细，但我似乎无法弄清楚如何制作，因此当它逐渐淡出时也会转换为1.4。

问题是模态消失得太快。

这是我的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);
    });

我的HTML：

<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能力属性。你最好在这里使用关键帧动画。

CSS淡出过渡

2 个答案: