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

您只需为transition : ease all .5s课程添加bg1即可。它会起作用

Answer 2

过渡：缓解所有.5s;将有助于创建动画效果，但只会为宽度设置动画。然后，创建另一个名为＆＃34; la＆＃34;高度为600px或任何你喜欢的高度也会扩大高度。

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

           }
      });

     });

JQuery添加类并删除类div动画

2 个答案: