38

Bootstrap Collapse プラグインを垂直ではなく水平から折りたたむ方法はありますか? コードを見ると、この機能は組み込まれていないように見えますが、何か不足していることを願っています...

どんな助けでも大歓迎です。ありがとう！

4

7 に答える 7

23

javascriptを変更したり追加したりせずに、これを非常に簡単に行う方法を見つけました。

最初に、すべてのTwitterBootstrapCSSの後に次のCSSを定義します。

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}

次に、ターゲット要素（クラスを定義する場所.collapse）で、クラスを追加するか、アニメーション化するプロパティに応じて追加する必要があり.widthます.height。

最後に、ターゲット要素のコンテンツをラップし、幅をアニメーション化する場合はその幅を明示的に定義する必要があります。高さをアニメートする場合、これは必要ありません。

ここで実用的な例を見つけることができます-> http://jsfiddle.net/ud3323/ZBAHS/

于 2012-09-25T23:14:52.463 に答える
6

私のバージョンのブートストラップ 3 (LESS を使用) では、これをグローバルな less ファイルに含めるだけで済みました。

.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}

collapse.js はトランジションのためにこのクラスを探すため、追加のクラスが必要です。width他の人の提案を試してみましたが、うまくいきませんでした。

于 2014-03-18T05:11:51.170 に答える
4

その特定のプラグインのオプションではないようです。そのように動作させるには、何らかの方法で変更するか、フックする必要があるようです...

JS ファイルを少し調べたところ、いくつかのことに気付きました。まず、CSS3 トランジションを使用しているように見えるbootstrap-transition.jsを使用しているように見えます。そのため、新しいトランジションを作成できる可能性があります。それがどのように機能しているかは、100%確実ではありません。

オプション 1

私の提案は、bootstrap-collapse.js プラグイン ファイルをしばらく調べて、それがどのように機能しているかを確認することです。

特に、この部分を見ていきます... bootstrap-carousel.js

this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])

bootstrap-transition.js.transitionからのコールバックのようです

オプション 2

私の2番目の提案は、あなた自身のものを書くことです。

私の答え

そして最後に私の答えは、ブートストラップのドキュメントを見ると、それはオプションではないようだということです。

いくつかの追加情報:

この Web サイトは、CSS3 トランジションで同様のことを行っているようです。 http://ricostacruz.com/jquery.transit/

于 2012-09-19T16:39:30.110 に答える
1

サポートされている場合、ハードウェアアクセラレーションを正しく使用するため、幅をアニメーション化するよりも、translateX(-100%) と translateX(0) が適していると思います

于 2014-04-16T12:19:26.013 に答える