Div 在点击时平滑扩展到全屏

Question

我试图让一个 div 在点击时平滑地扩展到全屏。我想要的最终产品类似于用户在此网站上单击案例研究https://infinum.co/

到目前为止，我的代码可以使 div 全屏显示，但由于我添加的位置固定而跳转。我不担心实际动画是由 CSS 还是 JavaScript/jQuery 处理的。

$(function() {
  $(".block").on("click", function() {
    $(this).addClass("fullscreen");
  });
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.block {
  width: 50%;
  margin: 0 auto 50px auto;
  height: 300px;
  background-color: red;
  transition: all 0.5s linear;
}
.block.fullscreen {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>

到目前为止，我所拥有的一切都可以在这支笔上找到：http : //codepen.io/anon/pen/RKGeYj

Answer 1

首先使您的#block全屏显示，然后应用position:absolute;大于全屏动画速度的延迟。

这是一个工作片段。

var isFullscreen = false;
$("#block").click(function (){ 
    var prop = {};
    var speed = 910;
    if(!isFullscreen){ // MAXIMIZATION
       prop.width = "100%";
       prop.height = "100vh";
       isFullscreen = true;
      $("#block").animate(prop,speed); 
      setTimeout(function() { 
        $("#block").css("position","absolute");
      }, 920);
    }
    else{         
      prop.width = "50%";
      prop.height = "250px";            
      isFullscreen = false;
      $("#block").animate(prop,speed); 
      setTimeout(function() { 
        $("#block").css("position","relative"); 
      }, 920);
    }
    
});

html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#block,#blockTwo{
  width:50%;
  height:250px;
  margin:0 auto;
  background-color: red;
}
#block{
  z-index:100;
}
#blockTwo{
  background-color:green;
}

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

<div id="block"></div>
<div id="blockTwo"></div>