Анимация бутстрапов

Вот что я хотел бы сделать:

Начальный дисплей

---------------------------------------------
|                                           |
|                                           |
|                                           |
|              .span12 #col1                |
|                                           |
|                                           |
|                                           |
|                               [#button]   |
|                                           |
|                                           |
---------------------------------------------

Затем, когда нажимается #button, содержимое # col1 анимируется, сдвигая вправо в .span3 и # col2.span9 анимируется слева направо (с экрана):

После нажатия кнопки/анимации

-------------------------------------------------
|                                |              |
|                                |              |
|                                |              |
|              .span9  #col2     | .span3 #col1 |
|                                |              |
|                                |              |
|                                |              |
|                                | [#button]    |
|                                |              |
|                                |              |
-------------------------------------------------

И тогда обратный может произойти, чтобы добраться до исходного состояния.

Спасибо!

ВОПРОС:

Я использую сетевую систему Twitter Bootstrap. Googling Twitter Bootstrap column transtions animation и вариации ничего не появлялись. Я не гуру анимации jquery, поэтому я думал, что умоляю добрых людей в переполнении стека.

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

Вот что я пробовал

http://jsfiddle.net/KdhAB/3/

Ответ 1

Это можно сделать с помощью переходов CSS3, которые согласуются с тем, как плагины Bootstrap JS выполняют свои анимации.

HTML

<div class="container">
  <div class="row">
    <div id="col2" class="span0"></div>
    <div id="col1" class="span12">
      <a id="trig" class="btn btn-inverse">Reflow Me</a>
    </div>
  </div>
</div>

JS

$('#trig').on('click', function () {
  $('#col1').toggleClass('span12 span3');
  $('#col2').toggleClass('span0 span9');
});

CSS

.row div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.span0 {
    width: 0;
    margin-left: 0;
}

JSFiddle

JSFiddle (Fluid)

_{Примечание. Анимация все еще немного неточна, но я полагаю, что все это можно будет развить отдельно. Этот ответ содержит основные сведения о том, как это сделать.}

Ответ 2

Этот построен на вершине гибкой скрипки: http://fiddle.jshell.net/274NN/74/

Это тип потока редактирования, например. предположим, что вы хотите показать скользящее меню одним нажатием кнопки:

1) Сдвиньте левый столбец из окна 2) Приведите меню, скользящее справа

Ширина меню указана в%, вы можете изменить его в соответствии с вашими потребностями.

Ответ 3

Вот пример в bootstrap 3: http://fiddle.jshell.net/6zu5wch5/4/. Разница в том, что вы не используете .span0{ margin-left:0;width:0;}, но .col-md-0 {float:left;width:0;}, чтобы наши div были в одной строке. Я использую класс col-md-0 для соглашения.