Animer bootstrap colonnes

Voici ce que j'aimerais faire:

Affichage Initial

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

Puis quand #bouton cliqué, #col1 contenu sont animés de glissement vers la droite dans un .span3 et #col2 .span9 anime à partir de la gauche vers la droite (hors écran):

Une Fois Que Le Bouton De La Souris/De L'Animation

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

Et alors l'inverse pourrait se produire pour arriver à l'état d'origine.

Merci!

LA QUESTION EST DE

Je suis en utilisant Twitter Bootstrap système de grille. Googler Twitter Bootstrap column transtions animation et les variations ne se sont pas rien. Je ne suis pas un jquery animation gourou, donc je pensais que je vous supplie de le genre personnes sur un débordement de pile.

L'espoir est qu'il y a quelqu'un ici qui peut en savoir plus que moi sur ce genre de chose serait de répondre avec un peu de code qui montre comment il peut être atteint. Désolé, je pensais que c'était implicite juste par affichage sur le site.

Voici ce que j'ai essayé de

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

InformationsquelleAutor Ronnie Overby | 2012-09-20
  1. 59

    Ce qui pourrait être fait avec des transitions CSS3, ce qui serait cohérent avec la façon dont Bootstrap JS plugins accomplir leurs animations.

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

    Note: L'animation est un encore un peu imprécis, mais je me dis que peut tous être réglés séparément. Cette réponse fournit le plan de base de la façon d'aller à ce sujet.

    • Ce serait formidable si cela a fonctionné avec le fluide de mise en page, qui de mon projet.
    • Changement .container à .contaner-fluid et .row à .row-fluid.
    • droit.... mon projet est déjà à l'aide de ces classes et ce merv l'approche ne fonctionne pas avec le fluide de mise en page. Modifier les classes dans le jsfiddle et les pauses.
    • Gros +1 pour @Jordan pour ajouter le Liquide JSFiddle! Désolé de ne pas se déplacer à moi-même.
    • Voici un peu modifié à disposition fixe démo sans écraser les marges: fiddle.jshell.net/Hbrzv/1
    • Qui l'a fait! Les gars, vous rock!
    • Je ne sais pas pourquoi, mais je dois ajouter visibility: hidden; à la .row-fluid .span0 de la règle, de sorte que le contenu ne soit pas montré. Le jsFiddle exemple ne pas se comporter de cette façon.
    • Ah oui, ici un violon avec le contenu de la span0: fiddle.jshell.net/274NN/6 sans overflow:hidden règle le contenu sortir du conteneur. Si vous venez de mettre le overflow:hidden règle sur la span0, vous verrez le contenu de pause breifly tandis que l'animation à span12. Dans mon violon, vous aurez remarqué que le overflow:hidden règle est appliquée aux deux divs
    • Avez-vous le même exemple dans le Bootstrap 3 ?
    • comment utiliser ce avec col-md-*. Je suis réglage de la largeur de col-md-0 sur 0%, même alors, l'élément s'affiche dans le code HTML.
    • Les deux JSFiddle liens sont rompus. Quelqu'un a eux?
    • hmm ressemble JSFiddle changé l'url pour les reliant directement à une page de résultat. J'ai corrigé les liens sur ce post pour pointer vers la page d'édition, mais ce sont des exemples anciens (BS 2.x).

    InformationsquelleAutor
  2. 2

    Celle-ci est construite sur le dessus de la réactivité du violon:
    http://fiddle.jshell.net/274NN/74/

    C'est le type de modification de flux par exemple, supposons que vous souhaitez afficher un menu coulissant sur le clic d'un bouton:

    1) faites Glisser la colonne de gauche de la fenêtre
    2) Amener menu coulissant à partir de la droite

    La largeur du Menu est donné en %, vous pouvez le modifier selon vos besoins

    • Dans votre violon, comment voulez-vous faire en sorte que la colonne de gauche ne marche pas à obtenir poussé mais plutôt, comprimé, de sorte que vous pouvez toujours voir le texte sur elle?
    InformationsquelleAutor Ramandeep Singh