Sanjeev K Sanjeev K - 3 months ago 13
CSS Question

Animate div from center to left on click

I have created a layout and I am stuck with the animation part, as it can be seen here in JSFiddle, If you click on any boxes from center then the same navigation on left side show with vertical layout, and center blocks will hide, this is working fine but requirement is when click on any of the centered boxes, it should show the left navigation but its show a animation that all those centered navigation are moving to left one by one.

Currently its working with simple show and hide but I want to add animation that will show the box moving from center position to left position, can somebody please help with the animation or guide how to achieve that?

Here are the code of what I have created so far:

<style>
.noPad{padding:0;}
.row {border-bottom: 1px solid #444;}
.col_box {border-right: 1px solid #444;}
.content_box{background:#f0f0f0; text-align:center; color:#000; font-size:18px; height:200px; display:block; width:100%; line-height:200px; cursor:pointer;}
.content_box:hover{background:#CCC;}
.sidenav {left: 0; position: fixed; top: 0; z-index: 1; font-size: 18px; background:#f0f0f0; width:320px; height:100%; display:none;}
.sidenav ul{list-style:none; padding:0; margin:0;}
.sidenav ul > h2{font-size:18px; color:#960000; text-transform:uppercase; text-align:center;}
.sidenav ul li{list-style:none;}
.sidenav ul li a{text-decoration:none; color:#404040; display:block; padding:15px 0 15px 25px; border-bottom:1px solid #ddd;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(".content_box").click(function(){
$(".sidenav").show();
$(".main-wrapper").hide();
});
</script>
<div class="sidenav">
<ul>
<h2>Navigation Here</h2>
<li><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
<li><a href="#">Navigation 5</a></li>
<li><a href="#">Navigation 6</a></li>
<li><a href="#">Navigation 7</a></li>
<li><a href="#">Navigation 8</a></li>
</ul>
</div>
<div class="container-fluid main-wrapper">
<div class="row">
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 1 </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 2 </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 3 </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 4</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 5 </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 6</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 7 </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> Navigation 8</div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box"> </div>
</div>
<div class="col-md-2 col_box noPad">
<div class="content_box">&nbsp;</div>
</div>
</div>
</div>

Answer

It's not possible to animate the display property, which is what jQuerys show/hide functions toggle. In stead, you can animate the menu by positioning it outside the canvas (left: -320px) and setting the position to left: 0 on click, then add a transition to your liking. Something along these lines (I edited the code from your fiddle).

Edit: Oh, wait, I think I kind of misunderstood how you wanted to animate. I've edited my answer slightly to animate the centered box as well.

$(".content_box").click(function(){
	$(".sidenav").css("left", "0");
	$(".col_box").css("margin-left", "-100%");
});
.noPad{padding:0;}
.row {border-bottom: 1px solid #444;}
.col_box {
  border-right: 1px solid #444;
  width: 100%;
}
.col_box:nth-child(1) {
  transition: all .2s ease-in;
}
.col_box:nth-child(2) {
  transition: all .2s ease-in .2s;
}
.col_box:nth-child(3) {
  transition: all .2s ease-in .4s;
}
.content_box{background:#f0f0f0; text-align:center; color:#000; font-size:18px; height:200px; display:block; width:100%; line-height:200px; cursor:pointer;}
.content_box:hover{background:#CCC;}
.sidenav {
  left: -320px;
  transition: all .2s ease-in .6s;
  position: fixed;
  top: 0;
  z-index: 1;
  font-size: 18px;
  background:#f0f0f0;
  width:320px;
  height:100%;
}
.sidenav  ul{list-style:none; padding:0; margin:0;}
.sidenav  ul > h2{font-size:18px; color:#960000; text-transform:uppercase; text-align:center;}
.sidenav  ul li{list-style:none;}
.sidenav  ul li a{text-decoration:none; color:#404040; display:block; padding:15px 0 15px 25px; border-bottom:1px solid #ddd;}
<div class="sidenav">
	<ul>
    <h2>Navigation Here</h2>
    <li><a href="#">Navigation 1</a></li>
    <li><a href="#">Navigation 2</a></li>
    <li><a href="#">Navigation 3</a></li>
    <li><a href="#">Navigation 4</a></li>
    <li><a href="#">Navigation 5</a></li>
    <li><a href="#">Navigation 6</a></li>
    <li><a href="#">Navigation 7</a></li>
    <li><a href="#">Navigation 8</a></li>
    </ul>
</div>
<div class="container-fluid main-wrapper">
  <div class="row">
    <div class="col-md-2 col_box noPad">
      <div class="content_box"> Navigation 1 </div>
    </div>
    <div class="col-md-2 col_box noPad">
      <div class="content_box"> Navigation 2 </div>
    </div>
    <div class="col-md-2 col_box noPad">
      <div class="content_box"> Navigation 3 </div>
    </div>
  </div>
</div>