Jquery 使用不透明度从“显示无”设置div动画无效 问题

我有一个登录屏幕，当用户单击登录按钮时，它将覆盖屏幕。我最初将登录屏幕的不透明度设置为0，并将显示设置为无

.login-screen {

    display: none;
    opacity: 0;
    z-index: 1;
    height: 100vh;
    width: 100vw;
    background: #3472FF;
    color: white;
    font-family: 'Roboto', 'sans-serif';
}

在我的Javascript中，我首先显示div，然后将不透明度设置为1：

 $(".login").on("click", function () {
        $(".login-screen").show(300, function () {
            $(".login-screen").css("opacity", "1");
        });
    });

然而，它并不像我希望的那样平稳过渡。它做了一件奇怪的事情（），当它淡入时调整登录屏幕的大小。然而，它会清晰地淡出

我想要的是和我的淡入淡出一样干净。我不希望登录屏幕中的div移动，我只希望它们在单击时淡入

我还需要从

登录屏幕开始

显示：无，因为

z-index:1

，这样我就可以实际单击登录按钮了。这就是为什么在

fadeOut（）

I

hide（）

显示之后

如果有人能帮我解决这个问题，我将不胜感激

更新 我曾尝试用Javascript来实现这一点，但由于某种原因，当我这样做时，当单击登录按钮时，登录屏幕根本不会显示

$(".login").on("click", function () {
    $(".login-screen").show();
    $(".login-screen").fadeIn(300);
});

.login-screen{
    display: none;
    opacity: 0;
}

代码 HTML Javascript JSFIDLE

$（文档）.ready（函数（）{
美元（“.grid”）.on（“.mouseenter”，“.grid square”，函数（）{
$（this.find（“.delete”）.fadeIn（100）；
$（this.find（“.edit”）.fadeIn（100）；
});
$（“.grid”）.on（“mouseleave”，“.grid square”，函数（）{
$（this.find（“.delete”）.fadeOut（100）；
$（this.find（“.edit”）.fadeOut（100）；
});
$（.closeNavBtn”）。在（“单击”，函数（）{
$（.sidenav”）.css（“宽度”、“0vw”）；
});
$（“.menu”）。在（“单击”上，函数（）{
$（“.sidenav”）.css（“宽度”，“250px”）；
});
$（“.login”）。在（“单击”，函数（）{
$（“.login屏幕”）.show（300，函数（）{
$（“.login screen”）.css（“不透明度”、“1”）；
});
});
$（“.close”）。在（“单击”上，函数（）{
$（“.login screen”）.fadeOut（300，函数（）{
$（“.login screen”）.hide（）；
})
});
});
@导入url（'https://fonts.googleapis.com/css?family=Roboto:300,400,500');
/*
字体系列：“Roboto”，无衬线；
字体系列：“Raleway”，无衬线；
*/
/*调色板（供参考）*/
.颜色最浅{
颜色：#87ABFE；
颜色：rgba（135171254,1）；
}
.彩色灯{
颜色：5C8EFF；
颜色：rgba（92142255,1）；
}
.彩色干管{
颜色：#3472FF；
颜色：rgba（52114255,1）；
}
.颜色深{
颜色：135AFF；
颜色：rgba（19,90,255,1）；
}
.颜色最深{
颜色：#0147E9；
颜色：rgba（1,71,233,1）；
}
/*常规样式和删除自动样式*/
身体{
保证金：0；
}
.侧导航{
背景色：#F4；
}
钮扣{
边界：无；
字体系列：“Roboto”，无衬线；
光标：指针；
背景色：rgba（15,72,204,0）；
}
/*侧导航样式*/
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
溢出x：隐藏；
过渡：0.5s；
填充顶部：70px；
盒影：1px0px10px5pxRGBA（122122122,0.5）；
-网络工具包盒阴影：1px 0px 10px 5px rgba（122、122、122、0.5）；
-moz盒阴影：2px5px5px5pxRGBA（122122122,0.5）；
}
.侧导航a，
.sidenav.closeNavBtn{
文字装饰：无；
字体系列：“Roboto”，无衬线；
颜色：#7a7a；
文本转换：大写；
}
.侧导航a{
填充顶部：20px；
垫底：20px；
左侧填充：20px；
字号：1.8em；
显示：块；
过渡：背景0.3s缓进；
}
.侧导航a:悬停，
.a:焦点{
背景：rgba（255,255,255,0.5）；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（rgba（255，255，255，0.5），rgba（255，255，255，0.8））；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（rgba（255，255，255，0.5），rgba（255，255，255，0.8））；
/*歌剧11.1至12.0*/
背景：-莫兹线性梯度（rgba（255，255，255，0.5），rgba（255，255，255，0.8））；
/*适用于Firefox 3.6至15*/
背景：线性梯度（rgba（255，255，255，0.5），rgba（255，255，255，0.8））；
/*标准语法*/
}
.sidenav.closeNavBtn{
位置：绝对位置；
顶部：20px；
右：20px；
字号：2em；
}
/*标题样式*/
标题{
字体系列：“Roboto”，无衬线；
字体大小：400；
字号：2em；
宽度：100vw；
文本转换：大写；
文本对齐：居中；
填充顶部：20px；
垫底：20px；
}
标题{
背景#3472FF；
颜色：白色；
/*对于不支持渐变的浏览器*/
背景：-webkit线性梯度（#3472FF，#5C8EFF）；
/*适用于Safari 5.1至6.0*/
背景：-o-线性梯度（#3472FF，#5C8EFF）；
/*歌剧11.1至12.0*/
背景：-莫兹线性梯度（#3472FF，#5C8EFF）；
/*适用于Firefox 3.6至15*/
背景：线性梯度（#3472FF，#5C8EFF）；
/*标准语法*/
}
标题。菜单，
header.login{
/*拖到顶部*/
位置：绝对位置；
排名：0；
/*工具栏上的中心菜单图标*/
边缘顶部：20px；
/*格式化*/
颜色：白色；
背景色：rgba（52114255,0）；
字号：1em；
}
标题.菜单{
/*拖到左角*/
左：0；
左边距：20px；
}
header.login{
/*拖到右角*/
右：0；
右边距：20px；
文本转换：大写；
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto:300i，400i'）；
/*一般造型*/
身体{
字体系列：“Roboto”，无衬线；
背景色：#EFEF；
颜色：#333333；
利润率：10px3%03%；
字体大小：100%；
字体大小：400；
显示：块；
}
.行{
显示：块；
}
上校{
显示：内联块；
}
.搜索，
.任务{
背景色：#FAFB；
}
div.element：第一个子元素{
边缘顶部：10px；
}
.元素{
边缘底部：10px；
}
/*删除自动样式*/
钮扣{
边界：无；
背景色：#FAFB；
颜色：#33333
<div class="login-screen">
        <button class="close"><span class="icon-x"></span></button>
        <form action="form.php" method="post">
            <div class="login-wrapper">
                <input type="text" name="username" placeholder="Username">
                <input type="text" name="password" placeholder="Password">
                <button type="submit" class="field submit" name="submit" value="submit">Login</button>
            </div>
        </form>
    </div>

/*Remove auto styling*/

button:focus,
input:focus {
    outline: 0;
}

.login-screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    height: 100vh;
    width: 100vw;
    background: #3472FF;
    color: white;
    font-family: 'Roboto', 'sans-serif';
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2em;
    color: white;
}

.login-wrapper {
    margin-top: 15%;
    margin-bottom: 15%;
}

input[type="text"],
.submit {
    display: block;
    margin: 0 auto;
}

input[type="text"] {
    cursor: text;
    border: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 2em;
    padding: 20px 20px 20px 20px;
    margin-bottom: 40px;
    width: 60%;
}

input[type="text"]::-webkit-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-ms-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]:-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

input[type="text"]::-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #3472FF;
    font-size: 1em;
}

.submit {
    background-color: white;
    color: #3472FF;
    font-size: 2em;
    text-transform: uppercase;
    padding: 20px 20px 20px 20px;
    border-radius: 7px;
    border: none;
}

$(document).ready(function () {
    $(".grid").on("mouseenter", ".grid-square", function () {
        $(this).find(".delete").fadeIn(100);
        $(this).find(".edit").fadeIn(100);
    });
    $(".grid").on("mouseleave", ".grid-square", function () {
        $(this).find(".delete").fadeOut(100);
        $(this).find(".edit").fadeOut(100);
    });
    $(".closeNavBtn").on("click", function () {
        $(".sidenav").css("width", "0vw");
    });
    $(".menu").on("click", function () {
        $(".sidenav").css("width", "250px");
    });
    $(".login").on("click", function () {
        $(".login-screen").show(300, function () {
            $(".login-screen").css("opacity", "1");
        });
    });
    $(".close").on("click", function () {
        $(".login-screen").fadeOut(300, function () {
            $(".login-screen").hide();
        })
    });
});

$(".login-screen").show(300, function () {
    $(".login-screen").css("opacity", "1");
});

display:none;