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> 

フォームブートストラップ3 CSSを来

glyphiconサイズ変更フルアイコン。このアイコンがこの部分をクリックするとフルスクリーンになります。もう一度クリックすると、その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を追加することで黒になります。しかし、フルスクリーンを表示してデフォルトの位置に戻るのを見るためにアニメ化することはできません。

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

移行：すべてを簡単に.5s;アニメーションエフェクトを作成するのに役立ちますが、幅をアニメーション化します。次に、600pxの高さまたは好きな高さの「la」という別のクラスを作成すると、高さも拡張されます。

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

      } 
     }); 

    });