castlenibill castlenibill - 6 months ago 7
CSS Question

Animate an element to the size of screen in fixed position

How do I animate a

<div>
to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that
<div>


Image:

sample

Answer
  1. Set a CSS3 transition to your element.
  2. Create a class that makes your element 100vw and 100vh (viewport width height units)
  3. Add that class on click

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  overflow: hidden; /* in order to contain content */
  
  /* The initial styles: */
  border-radius: 25px;
  background: red;
  left:50px; bottom:50px;
  width: 50px;
  height: 50px;
  

  /* TRANSITION TO THE RESCUE */
          transition: 0.7s;
  -webkit-transition: 0.7s;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen{
  /* Your override styles: */
  border-radius: 0;
  background: gold;
  left:0; bottom:0;
  width: 100vw;
  height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>