Div Expand to Full Screen Smoothly on Click

Question

I am trying to make a div expand smoothly to fullscreen when clicked. The final product I am going for is similar to when a user clicks a case study on this website https://infinum.co/

So far my code can make the div fullscreen but it jumps because of the position fixed I add. I am not bothered whether the actual animation is handled by CSS or 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>

All I have so far can be found on this pen: http://codepen.io/anon/pen/RKGeYj

Answer 1

make your #block fullscreen first and then apply the position:absolute; after a delay greater than the fullscreen animation speed.

Here's a working snippet.

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>

Answer 2

Checkout http://usefulangle.com/post/38/animating-lightbox-with-css-javascript .It contains the animation that you're looking for.

When you're making the position as fixed, you should give the initial top & left properties as well. You can get the initial top & left properties using the getBoundingClientRect method. Along with animating top & left, you should animate width & height as well for a smoother look.

.in-animation {
    animation: inlightbox 0.8s forwards;
    position: fixed !important;
}

@keyframes inlightbox 
{ 
    50% { 
        width: 100%;
        left: 0;
        height: 200px;
    }
    100% {
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }
}