Анимация div от центра к левому краю

jquery html css animation css-transitions

109 просмотра

1 ответ

Я создал макет, и я застрял с частью анимации, как это можно увидеть здесь, в 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>
Автор: Sanjeev Kumar Источник Размещён: 08.11.2019 11:13

Ответы (1)


1 плюс

Решение

Не возможно анимировать свойство display, которое переключает функции jQuerys показать / скрыть. Вместо этого вы можете анимировать меню, поместив его за пределы холста ( 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>

Автор: antidecaf Размещён: 20.08.2016 11:35
Вопросы из категории :
32x32