使用动画效果来显示Bootstrap列

Question

使用动画效果来显示Bootstrap列

jqueryhtmlanimationtwitter-bootstrapjquery-animate

34

以下是我想要实现的内容：

初始显示

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

当点击#button时，#col1的内容会动画式地向右滑入中，而#col2的则从左侧进入屏幕 (从屏幕外侧) 以动画形式向右滑入:

点击按钮/动画后

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

接着可以反转回到原始状态。

谢谢！

问题是什么

我正在使用 Twitter Bootstrap 网格系统。Google 搜索 Twitter Bootstrap 列转换动画 和类似的关键词并没有找到任何结果。我不是 jquery 动画大师，所以我想请求 Stack Overflow 上的热心的人们的帮助。

希望有人能够回答这个问题并提供一些代码来演示如何实现它。抱歉，我认为这在通过网站发布问题时已经表述清楚了。

以下是我的尝试

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

- Ronnie Overby

1

对于使用 Bootstrap 4 的未来读者，请参见 https://dev59.com/dFgQ5IYBdhLWcg3wSyIO。 - Carol Skelly

2个回答

2

这个是基于响应式演示样例制作的: http://fiddle.jshell.net/274NN/74/ 这是一种编辑流程，例如您想在单击按钮时显示滑动菜单：

1）从窗口中滑出左侧列 2）从右侧带有菜单的滑块

菜单宽度以％为单位给出，您可以根据需要更改它。

- Ramandeep Singh

在你的fiddle中，你如何使左侧的列不被推开，而是压缩，这样你仍然可以看到上面的文本？ - Return-1

你的小提琴出现了 404 错误。 - Vigrant

是的，它很久以前发布了，我猜他们已经将其删除了。 - Ramandeep Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- merv · Accepted Answer

可以使用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 (Fluid)

_{注意：动画仍然有些不精确，但我认为这些可以单独解决。本答案提供了如何进行基本操作的概述。}