web-dev-qa-db-ja.com

Bootstrap崩壊にはジャンプの多い遷移があります

bootstrap navbarの遷移に問題があります。折りたたみ要素にパディングがあると、折りたたみの遷移がジャンプします。

私はこの問題をグーグルで検索しましたが、問題はパディングにあるようです。

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

実際、menu-menu-container要素からパディングを削除すると、アニメーションはうまく機能し、非常にスムーズになります

これは私のコードペン> http://codepen.io/mp1985/pen/EyOJYE

この奇妙な問題なしに同じ結果を達成するにはどうすればよいですか？

ヘルプ、提案、アドバイスはありますか？

javascriptjquerycsstwitter-bootstrapcollapse
10
mattia

問題折りたたむコンテナのパディングが原因です。それはcollapse.jsによる高さの計算を複雑にします

例：

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

これは次の場合に修正されますパディングを内部コンテナに移動します：

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>
10
Jorge Díaz

340pxであるnavbar-collapseクラスのmax-heightが原因で発生し、以下のコードを使用して処理します。 http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
}
1
Rahul

影響を受けるアイテムにCSSトランジションを追加してみてください。これにより、ブラウザがさまざまなパディング間をアニメーション化するため、トランジションのジャンプが少なくなります。独自のタイミングプロパティを使用して、CSSでアニメート可能な各プロパティをターゲットにすることができます。ここで、アニメーション化可能なさまざまなプロパティをすべて確認できます。 http://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful
* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
0
EricL