jQuery添加类和删除类div动画

Question

一些div想要全屏动画。这意味着慢慢全屏。

这是我的div代码:

<div class="bg">
<div class=" col-sm-3 col-md-3 col-lg-3 col-xs-12 col-mxs-3 subcontents" data-spy="affix" data-offset-top="180" id="affix2">
<li class="list-group-item list-group-item-info" ><strong>aaa​</strong><a href="#" class="open1"><span class="glyphicon glyphicon-resize-full pull-right openicon" aria-hidden="true"></span></a></li>


Some contains

</div>
</div>

来自 bootstrap 3 css 的 glyphicon-resize-full 图标。单击此图标时，此 div 将全屏显示。再次单击它时，该 div 会回到默认位置。现在这对我有用。但我尝试添加动画 css 代码，它也不起作用。

JQuery 代码:

$(document).ready(function() {
    $(".open1").on("click",function(){
        if($(".subcontents").hasClass("popup1")){
            $(".subcontents").removeClass("popup1"); 
            $(".bg").removeClass("bg1");
            $(".openicon").addClass("glyphicon-resize-full");
            $(".openicon").removeClass("glyphicon-resize-small");

        } else{
            $(".subcontents").addClass("popup1"); 
            $(".bg").addClass("bg1");
            $(".openicon").removeClass("glyphicon-resize-full");
            $(".openicon").addClass("glyphicon-resize-small");

        }
    });

});

CSS 代码:

.popup1{
    position:fixed;
    top:1px;
    left:25%;
    width:50vw;
    height:90vh;
    z-index:1000;

}

.bg1{
    height:100%;width:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.8); z-index:999;
}

当该图标单击时，popup1 和 bg1 被添加到子内容和 bg div。这意味着子内容来到中间和全屏，并且通过添加 bg1 背景将是黑色的。但是无法设置动画以查看即将到来的 div 全屏并再次转到默认位置。

$(document).ready(function() {
    $(".open1").on("click",function(){
        if($(".subcontents").hasClass("popup1")){
            $(".subcontents").removeClass("popup1"); 
            $(".bg").removeClass("bg1");
            $(".openicon").addClass("glyphicon-resize-full");
            $(".openicon").removeClass("glyphicon-resize-small");

        } else{
            $(".subcontents").addClass("popup1"); 
            $(".bg").addClass("bg1");
            $(".openicon").removeClass("glyphicon-resize-full");
            $(".openicon").addClass("glyphicon-resize-small");

        }
    });

});

.popup1{
    position:fixed;
    top:1px;
    left:25%;
    width:50vw;
    height:90vh;
    z-index:1000;

}

.bg1{
    height:100%;width:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.8); z-index:999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />

<div class="bg">
<div class=" col-sm-3 col-md-3 col-lg-3 col-xs-12 col-mxs-3 subcontents" data-spy="affix" data-offset-top="180" id="affix2">
<li class="list-group-item list-group-item-info" ><strong>aaa​</strong><a href="#" class="open1"><span class="glyphicon glyphicon-resize-full pull-right openicon" aria-hidden="true"></span>Open</a></li>


Some contains

</div>
</div>

Answer 1

您可以为 bg1 类添加 transition : ease all .5s。它会起作用