Question

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;
    }

如果您在点击按钮后看到小提琴，则面膜会更早出现。但由于过渡效应，弹出窗口非常缓慢。我添加了相同的过渡到蒙版。但是没有效果。

我如何使用面具实现相同的过渡？或者有没有最好的方式来显示弹出窗口和面具？

有什么想法吗？

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;
    }

这是一个更新的小提琴，除了弹出窗口之外还有掩码。 updated fiddle

弹出面具非常快速地显示出来

1 个答案: