动画引导列

Question

这是我想做的事情:

初始显示

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

然后当#button被点击时,#col1内容被动画向右滑动到.span3和#col2 .span9动画从左到右(从屏幕外):

按钮单击/动画后

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

然后反转可能发生到原始状态.

谢谢!

问题是

我正在使用Twitter Bootstrap网格系统.谷歌搜索Twitter Bootstrap column transtions animation和变化没有发现任何东西.我不是一个jquery动画大师,所以我想我会讨论堆栈溢出的那种人.

希望有一个人在这里可能比我更了解这种事情会回答一些显示如何实现的代码.对不起,我认为这只是通过在网站上发布暗示的.

这是我尝试过的

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

Answer 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(流体)

_{注意:动画仍然有点不精确,但我认为这些都可以单独解决.这个答案提供了如何进行的基本概述.}