单击时从中心向左动画 div

Question

我已经创建了一个布局，但我被动画部分卡住了，正如在JSFiddle 中可以看到的那样，如果您从中心单击任何框，那么左侧的相同导航将显示为垂直布局和居中块将隐藏，这工作正常，但要求是当单击任何居中的框时，它应该显示左侧导航，但它会显示所有这些居中导航正在向左移动的动画。

目前它使用简单的显示和隐藏，但我想添加动画以显示框从中心位置移动到左侧位置，有人可以帮忙制作动画或指导如何实现吗？

以下是我目前创建的代码：

<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 1

无法对 display 属性进行动画处理，这是 jQuery 显示/隐藏函数切换的方式。相反，您可以通过将菜单放置在画布外部 (left: -320px) 并在单击时将位置设置为 left: 0 来为菜单设置动画，然后根据自己的喜好添加过渡。这些方面的东西（我从你的小提琴中编辑了代码）。

编辑：哦，等等，我想我有点误解了你想要如何制作动画。我已经稍微编辑了我的答案，以便为居中的框设置动画。

$(".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>