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>

glyphicon-resize-full 图标来自 bootstrap 3 css。当此图标单击此 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。它会工作

Answer 2

过渡：缓解所有 0.5 秒；将有助于创建动画效果，但只会为宽度设置动画。然后，创建另一个名为“la”的类，其高度为 600 像素或您喜欢的任何高度也会扩大高度。

<style>
.popup1{
position:fixed;
top:1px;
left:25%;
width:50vw;
height:100%;
z-index:1000;
transition : ease all .5s;


}
.la{
  height:600px;
}


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

  </style>

  <script>
    $(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");
             $("li").removeClass("la");


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

           }
      });

     });