CSS淡出过渡答案

【问题标题】：CSS fade out transitionCSS淡出过渡
【发布时间】：2016-06-27 05:32:27
【问题描述】：

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

【问题讨论】：

你能把它变成小提琴吗？
我添加了一个现场演示。 79.179.201.217
jsfiddle 更好，因为我们可以与代码交互

标签： jquery css

【解决方案1】：

您无法转换visibility，因此当您在.modal 上添加visibility:hidden 时，它会在不转换的情况下消失。你应该只使用opacity。

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

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

【讨论】：

谢谢，我使用了 z-index: -1000 并将 .modal 上的不透明度设置为 0，然后当它激活时，我将 z-index 更改回 10000 并将不透明度设置为1. 现在效果很好。

【解决方案2】：

visibility 不是 transformable 属性。你最好在这里使用关键帧动画。

【讨论】：