动画引导列 [英] Animate bootstrap columns

问题描述

这是我想要做的:

初始显示

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

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

按钮点击/动画之后

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

然后反过来可能会达到原始状态.

谢谢！

问题是

我正在使用 Twitter Bootstrap 网格系统.谷歌搜索 Twitter Bootstrap 列转换动画 和变体没有发现任何东西.我不是 jquery 动画专家，所以我想我会恳求善良 堆栈溢出的人.

希望这里有人可能比我更了解这类事情，他们会回答一些代码来说明如何实现.抱歉，我以为只是在网站上发帖就暗示了这一点.

这是我尝试过的

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

解决方案

这可以通过 CSS3 过渡来完成，这与 Bootstrap JS 插件完成动画的方式一致.

HTML

<div class="row"><div id="col2" class="span0"></div><div id="col1" class="span12"><a id="trig" class="btn btn-inverse">重排我</a>

</div>

JS

$('#trig').on('click', function () {$('#col1').toggleClass('span12 span3');$('#col2').toggleClass('span0 span9');});

CSS

.row div {-webkit-transition: 宽度 0.3s 缓解，边距 0.3s 缓解；-moz-transition: 宽度 0.3s 缓解，边距 0.3s 缓解；-o-transition:宽度 0.3s 缓和，边距 0.3s 缓和；过渡:宽度 0.3s 缓和，边距 0.3s 缓和；}.span0 {宽度:0；左边距:0；}

JSFiddle

JSFiddle(流体)

_{注意:动画仍然有点不精确，但我认为可以单独制作.这个答案提供了如何去做的基本大纲.}

Here's what I'd like to do:

Initial Display

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

Then when #button gets clicked, #col1 contents are animated sliding over to the right into a .span3 and #col2 .span9 animates in from the left to the right (from off screen):

After Button Click/Animation

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

And then the inverse could happen to get to the original state.

Thanks!

THE QUESTION IS

I'm using Twitter Bootstrap grid system. Googling Twitter Bootstrap column transtions animation and variations didn't turn up anything. I'm not a jquery animation guru, so I thought I'd beseech the kind people on stack overflow.

The hope is that there's someone on here that may know more than me about this sort of thing would answer with some code that shows how it can be achieved. Sorry, I thought that was implied just by posting on the site.

Here's what I've tried

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

解决方案

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

这篇关于动画引导列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！