имитировать слайд/анимировать поведение ящика открываемый/закрыто

Question

Этого пера я создал: http://codepen.io/helloworld/pen/ogwqpX?editors=101

Прежде чем нажать оранжевую стрелку DIV на я поставил Ид = «врезку» на дисплей: нет;

Когда вы нажимаете оранжевую стрелку div, она перемещается на 200 пикселей влево, а свойство отображения боковой панели устанавливается на «авто».

Вся анимация - это не то, что я хочу.

Я хочу, чтобы вся sidebarContainer + sidebarHandle/sidebar перемещалась влево на 200px, начиная с местоположения боковой панелиHandle. В настоящий момент анимация начинается с правой стороны боковой панели, поэтому анимация выглядит плохо.

Как я могу открыть и закрыть поведение всплывающего окна/ящика?

HTML

<div id="view" style="height:400px;"> 
    <div style="height:100%;background:black;" class="col-xs-3"> 
     column 3 
    </div> 
    <div style="height:100%;background:red;" class="col-xs-4"> 
     column 4 
    </div> 
    <div id="availableSidebarColumn" style="padding:0;background:yellow;height:100%;" class="col-xs-1"> 

     <div class="sidebarClosed" id="sidebarContainer" style="position:absolute;z-index:10; display:table;height:100%;width:30px;background:green;"> 

       <div id="sidebarHandle" style="border:1px solid black;cursor:pointer;background-color: orange;width:100%;display: table-cell;height:100%;vertical-align: middle;font-size:32px;" class="text-center glyphicon glyphicon-chevron-left"> 
       </div> 

       <div id="sidebar" style="display:none;border:1px solid black;background:orange;height:100%;width:200px"> 
       <div style="background:lightblue;height:10%;">navigation</div> 
       <div style="background:lightgreen;height:90%;">content</div> 
       </div>    
     </div>  

    </div> 
    <div style="height:100%;background:pink;" class="col-xs-4"> 
     column 4 
    </div> 
</div> 

CSS

*{ 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; 
} 

JS

$(function() { 
     $('#view').height(400); 

     $('#sidebarHandle').click(function() { 

       $('#sidebarHandle').toggleClass('glyphicon-chevron-right glyphicon-chevron-left'); 
       $('#sidebarContainer').animate({right:'200px'},350); // 200px is the width of the sidebar 
       $('#sidebar').css('display', "auto"); 

     }); 
    }); 

Answer 1

Если я правильно понял, то при нажатии кнопки на этой ручке некоторые вещи должны скользить слева направо, и наоборот, когда вы нажимаете на нее снова.

• удалите дисплей ни от #sidebar
• некоторых дополнительный CSS будет обрабатывать его видимость, ширину: 0 + переполнение: скрытый
• установить toggleClass между моментом, когда его открыли, чтобы ширина: необходимая ширину, и когда его закрыт, вернитесь к ширине: 0;
• и все об этом.

Возможно, это может быть сделано через js, например, для анимации этой ширины, в течение определенного времени я использовал transition, чтобы анимировать его.

Я добавил дополнительный CSS используется, во вкладке CSS, вы можете проверить demo here и, надеюсь, это поможет вам

---

Хорошо, так как вы знаете ширину ящика и ширину триггера вы можете установить ширину для своего контейнера. Учитывая эту ситуацию, я немного изменил ваш оригинальный css, чтобы установить абсолютное значение как для триггера, так и для ящика, чтобы я мог анимировать ширину или левый/правый реквизит. проще.

Я сделал два примера, чтобы проиллюстрировать этот пример, надеюсь, на этот раз я правильно понял. Структура разметки в основном одинакова, только имена id/class различаются (имена идентификаторов были слишком длинными, чтобы отслеживать, кто и что делает).

Проверьте demos here, и дайте мне знать, как это происходит.

---

Update v3

Ящик был отодвинут вправо, потому что в моем первоначальном примере я установить некоторые поля между этими 2 ящиками, чтобы лучше понять, Что происходит.

Теперь для проблем с z-index, ну, это довольно просто, так как ящик был сдвинут на 200 пикселей справа, он упал бы под соседним родным братом, поэтому вам пришлось добавить некоторый z-индекс, чтобы инвертировать их порядок ,

Также на ящике была установлена ​​статическая ширина (я думаю, что 200 штук), однако, если вы хотите, чтобы он содержался внутри его родителя, вы можете получить ширину родителей, установить его в ящик, и он должен будет хорошо. .

Отъезд new pen here