JQuery add class and remove class div animation

Question

Some of div want to get full screen with animation. which means slowly full screen.

This is my div Code:

<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 icons coming form bootstrap 3 css. when this icon click this div will be full screen. when again click it, that div come to default position. Now that is working for me. but I tried to add animation css code it is also not work.

JQuery Code:

$(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 Code:

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

When that icon click popup1 and bg1 are add to subcontents and bg divs. which means subcontents come to middle and full screen and also background will be black by adding bg1. But can't animate that to see coming that div full screen and again going to default position.

 $(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

You can just add transition : ease all .5s for bg1 class. it would work

Answer 2

The transition : ease all .5s; will help create the animation effect but will only animate the width. Then, creating another class called "la" with the height of 600px or whatever height you like will expand the height as well.

<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");

           }
      });

     });