web-dev-qa-db-ja.com

Twitter Bootstrapプラグインの方向を折りたたむ-垂直ではなく水平

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

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

jquerytwitter-bootstrapjquery-pluginsbootstrap-4
33
Roy Daniels

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

最初に、すべてのTwitter Bootstrap 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 class）クラスを追加する必要があります.widthまたは.heightアニメーション化するプロパティに応じて。

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

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

22
Roy Daniels

bootstrap 3.0.0を使用すると、幅クラスをターゲット要素に追加し、アニメーション化する場合は次のCSSを追加するだけです。

.collapse.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}
21
flipside

bootstrap 3（LESSを使用））のバージョンでは、これを単にグローバルなlessファイルに含める必要がありました。

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

Collapse.jsは遷移のためにこのクラスを探すため、余分なクラスhasはwidthになります。私は他の人の提案を試しましたが、それらは私にはうまくいきませんでした。

6
J_A_X

2019に更新

ブートストラップ4.x

ブートストラップ4の水平折りたたみ遷移は基本的に同じですが、可視クラスは.show の代わりに .in。また、多くの要素がdisplay：flexになっているため、display：blockを指定すると役立つ場合があります。

.collapse.show {
  visibility: visible;
}

4.xデモ
4.xサイドバーデモ

以下も参照してください。
ブートストラップの水平メニューをサイドメニューに折りたたみます
ブートストラップ-ナビゲーションバーを上からではなく左からスライドする方法

Bootstrap 3.3.7（元の回答）

既存の答えはどれも私にとってはうまくいきませんでした。最新バージョンで折りたたみアニメーションを水平にするには、両方のトランジションを幅に設定し、visibilityも使用する必要があります。

.collapse {
  visibility: hidden;
}
.collapse.in {
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

.xデモ

5
Zim

その特定のプラグインのオプションではないようです。そのように動作させるには、何らかの変更が必要な場合があります。

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])

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

オプション2

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

私の答え

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

追加情報：

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

4
Kris Hollenbeck

ここでは良い答えですが、より明確な双方向の移行のためにいくつかの修正を行う必要がありました。

.collapse.width, .collapsing {
    height: 25px; /* depending on your element height */
    overflow: hidden;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

固定の高さを設定すると、要素が折りたたまれて展開されるときにページが「ジャンプ」するのを防ぐのにも役立ちました。

0
Ixalmida

私は、translateX（-100％）とtranslateX（0）が、サポートされている場合にハードウェアアクセラレーションを正しく使用するため、幅をアニメートするのではなく、進むべき方法だと思います

0
Adam Spence