web-dev-qa-db-fra.com

Animer bootstrap colonnes

Voici ce que j'aimerais faire:

Affichage initial

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

Ensuite, lorsque #bouton est cliqué, le contenu # col1 est animé en glissant vers la droite dans un .span3 et # col2 .span9 s'anime de gauche à droite (hors écran):

Après le bouton/animation

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

Et puis l'inverse pourrait arriver pour revenir à l'état d'origine.

Merci!

LA QUESTION EST

J'utilise Twitter Bootstrap grid system. Googling Twitter Bootstrap column transtions animation et les variations n'ont rien révélé. Je ne suis pas un gourou de l'animation jquery, j'ai donc pensé implorer les personnes aimables en cas de débordement de pile.

L'espoir est qu'il y a quelqu'un ici qui pourrait en savoir plus que moi sur ce genre de chose qui répondrait avec un code qui montre comment cela peut être réalisé. Désolé, je pensais que c'était implicite juste en publiant sur le site.

Voici ce que j'ai essayé

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

jqueryhtmlanimationtwitter-bootstrapjquery-animate
34
Ronnie Overby

Cela pourrait être fait avec des transitions CSS3, ce qui serait cohérent avec la façon dont Bootstrap les plugins JS accomplissent 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 (fluide)

Remarque : L'animation est encore un peu imprécise, mais je pense que tout peut être élaboré séparément. Cette réponse fournit les grandes lignes de la marche à suivre.

59
merv

Celui-ci est construit sur le dessus du violon réactif: http://fiddle.jshell.net/274NN/74/

C'est le type d'un flux d'édition, par exemple supposons que vous vouliez afficher un menu coulissant en cliquant sur un bouton:

1) Faites glisser la colonne de gauche hors de la fenêtre 2) Faites glisser le menu de droite

La largeur du menu est donnée en%, vous pouvez la changer selon vos besoins

2
Ramandeep Singh