jquery - bootstrap - Animar columnas de arranque

class animated bootstrap

Question

Esto es lo que me gustaría hacer:

Pantalla inicial

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

Luego, cuando se hace clic en #boton, los contenidos de # col1 se animan deslizándose hacia la derecha en un .span3 y # col2 .span9 se anima de izquierda a derecha (desde fuera de pantalla):

Después del clic de botón / animación

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

Y luego puede ocurrir lo contrario para llegar al estado original.

¡Gracias!

LA PREGUNTA ES

Estoy usando el sistema de red Twitter Bootstrap. Twitter Bootstrap column transtions animation y las variaciones de las Twitter Bootstrap column transtions animation nada. No soy un gurú de la animación de jquery, así que pensé que podría suplicar a las personas amables en el desbordamiento de la pila.

La esperanza es que haya alguien aquí que pueda saber más que yo sobre este tipo de cosas que respondería con algún código que muestre cómo se puede lograr. Lo siento, pensé que eso estaba implícito simplemente publicando en el sitio.

Esto es lo que he intentado

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

Answer 1

Aquí hay algunos ejemplos en bootstrap 3: http://fiddle.jshell.net/6zu5wch5/4/ . La diferencia es que no usa .span0{ margin-left:0;width:0;} pero .col-md-0 {float:left;width:0;} para mantener nuestros divs en una fila. Yo uso la clase col-md-0 por el bien de la convención.

Answer 2

Este está construido sobre el violín responsivo: http://fiddle.jshell.net/274NN/74/

Es un tipo de flujo de edición, por ejemplo, supongamos que quieres mostrar un menú deslizante al hacer clic en un botón:

1) Deslice la columna izquierda fuera de la ventana 2) Haga que el menú deslice desde la derecha

El ancho del menú se da en%, puede cambiarlo según sus necesidades

Answer 3

Esto podría hacerse con transiciones de CSS3, lo que sería coherente con la forma en que los complementos Bootstrap JS logran sus animaciones.

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 (fluido)

_{Nota : La animación es aún un poco impreciso, pero creo que todo puede resolverse por separado. Esta respuesta proporciona el esquema básico de cómo hacerlo.}