56

fade現在、モーダル div にクラスを追加することにより、モーダル スライド ダウン効果が行われます。cssを変更することで、横から（または下から）スライドする効果を変更することはできますか？これを行う方法に関する情報をオンラインで見つけることができず、自分でこれを行うのに十分な css を知りません。

html:

<div id='test-modal' class='modal fade hide'>
  <div>Stuff</div>
</div>
4

3 に答える 3

118

Bootstrap 3 は、GPU ハードウェア アクセラレーションを使用してアニメーションを改善するために、CSS トランジションの代わりに CSS トランスフォーム translate3d を使用するようになりました。

次の CSS (サン イージング) を使用します。

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

これは、左側からスライドインするために使用できる CSS です。

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

負のセレクターに注意してください。これは、「.modal.in .modal-dialog」の定義が干渉しないようにするために必要であることに気付きました。注: 私は CSS の達人ではないので、誰かがこれをよりよく説明できる場合は、お気軽に :)

さまざまな側面からスライドインする方法:

  • 上：translate3d(0, -25%, 0)
  • 下：translate3d(0, 25%, 0)
  • 左：translate3d(-25%, 0, 0)
  • 右：translate3d(25%, 0, 0)

さまざまなスライド方向を組み合わせて一致させたい場合は、「左」などのクラスをモーダルに割り当てることができます...

<div class="modal fade left">
    ...
</div>

...そして、それを具体的にCSSでターゲットにします:

.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

フィドル: http://jsfiddle.net/daverogers/mu5mvba0/

おまけ- 少しおどけて、斜めに滑り込むことができます。

  • 左上：translate3d(-25%, -25%, 0)
  • 右上：translate3d(25%, -25%, 0)
  • 左下の：translate3d(-25%, 25%, 0)
  • 右下：translate3d(25%, 25%, 0)

更新 (05/28/15): 別の角度を表示するようにフィドルを更新しました

これを LESS テンプレートで使用する場合は、BS3 のベンダー プレフィックス mixin を使用できます (含まれている場合)。

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}
于 2014-09-08T06:21:53.967 に答える
28

この情報は古くなっています。Bootstrap 3 では、これを別の方法で処理するようになりました。新しいバージョンを使用している場合は、更新された回答を参照してください。

「スライドイン」遷移は、実際にはブートストラップ css によって処理されます。具体的には、次の部分で処理されます。

// bootstrap.css

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

トランジションの方向を変更するには、これらのスタイルを追加するだけです (ブートストラップ css は将来のバージョンで更新されるため、独自のスタイルシートに)。これらは、ブートストラップ スタイルを上書きします。左からモーダル スライドインを行うには、次のようにします。

.modal.fade {
  left: -25%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.fade.in {
  left: 50%;
}​

ここでjsfiddle を使用します。

右から左に遷移するには、遷移元のモーダルに大きな正のパーセンテージを指定し、モーダルの最終静止位置をそれぞれの方向に変更します。例えば.modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

右から左への例。

下から上への例。

CSS トランジションの詳細については、こちらをご覧ください。

于 2012-11-20T05:40:33.813 に答える