34

这是我想做的：

初始显示

---------------------------------------------
|                                           |
|                                           |
|                                           |
|              .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/

4

2 回答 2

61

This could be done with CSS3 transitions, which would be consistent with the way Bootstrap JS plugins accomplish their 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 (Fluid)

Note: The animation is a still a bit imprecise, but I figure that can all be worked out separately. This answer provides the basic outline of how to go about it.

于 2012-09-20T22:48:35.873 回答
2

这个是建立在响应式小提琴之上的：http: //fiddle.jshell.net/274NN/74/

它是一种编辑流程，例如，假设您想在单击按钮时显示滑动菜单：

1) 将左栏滑出窗口 2) 将菜单从右侧滑出

菜单宽度以 % 为单位，您可以根据需要更改它

于 2013-03-07T10:24:39.510 回答