javascript - 弹出掩码非常非常快地显示

Question

Demo

HTML

<div class="x">
</div>

<input class="clickMe" type="button" value="ClickMe"></input>

JS

  $(".clickMe").click(
            function()
            {
               $('.x').show().css('top',0).addClass("mask"); 
            }
        );

CSS:

.x
    {
        width: 200px;
        height: 200px;
        border: 1px solid #0f0f0f;
        position: relative;
        top: -210px;
        transition: all 1s ease 0s;
        float: right;
        margin-right: 20px;
    }
    .mask::before
    {
        position: fixed;
        top:0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        content:"";
        background-color: #777;
    }
    .mask::after
    {
        content: "";
        background-color: #fff;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
    }

    .mask
    {
        transition: all 2s ease 0s;
    }

如果您在单击按钮后在 fiddle 中看到，掩码出现得非常早。但是由于过渡效果，弹出窗口非常缓慢。我向蒙版添加了相同的过渡。但是没有效果。

我如何使用蒙版实现相同的过渡？或者有什么最好的方法来显示弹出窗口和蒙版吗？

有什么想法吗？

Answer 1

尝试为淡入添加一个单独的 div，如此 fiddle .

html:

<div class="overlay"></div>

js:

$('.overlay').addClass('visible');

CSS:

.x
    {
        width: 200px;
        height: 200px;
        border: 1px solid #0f0f0f;
        position: absolute;
        top: -210px;
        right:0;
        transition: all 1s ease 0s;
        margin-right: 20px;
        z-index:10;
        background-color:#fff;
    }
    .overlay
    {
        position: absolute;
        top:0;
        left: 0;
        z-index:-1;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
        transition : all 1s linear;        
        opacity:0;

    }
    .visible{
        opacity: 1;
        z-index:5;
    }

这是一个更新的 fiddle ，它对除弹出窗口之外的所有内容都有 mask 。 updated fiddle