34

これが私がやりたいことです：

初期表示

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

次に、＃buttonがクリックされると、＃col1のコンテンツがアニメーション化されて右にスライドして.span3になり、＃col2 .span9が左から右に（画面外から）アニメーション化されます。

ボタンクリック/アニメーション後

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

そして、逆のことが起こり、元の状態に戻る可能性があります。

ありがとう！

質問は

TwitterBootstrapグリッドシステムを使用しています。グーグルTwitter Bootstrap column transtions animationとバリエーションは何も現れませんでした。私はjqueryアニメーションの第一人者ではないので、スタックオーバーフローの親切な人たちにお願いしたいと思いました。

希望は、この種のことについて私よりも知っているかもしれない誰かが、それがどのように達成されるかを示すいくつかのコードで答えるだろうということです。申し訳ありませんが、サイトに投稿するだけでそれが暗示されていると思いました。

これが私が試したことです

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

4

2 に答える 2

61

これは、CSS3トランジションを使用して実行できます。これは、BootstrapJSプラグインがアニメーションを実行する方法と一致します。

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（流体）

注：アニメーションはまだ少し不正確ですが、すべて個別に作成できると思います。この回答は、それを実行する方法の基本的な概要を提供します。

于 2012-09-20T22:48:35.873 に答える
2

これはレスポンシブフィドルの上に構築されています：http： //fiddle.jshell.net/274NN/74/

これは編集フローの一種です。たとえば、ボタンをクリックしたときにスライドメニューを表示したいとします。

1）ウィンドウの外に左の列をスライドさせます2）メニューを右からスライドさせます

メニュー幅は％で表示され、必要に応じて変更できます

于 2013-03-07T10:24:39.510 に答える