web-dev-qa-db-ja.com

フェードイン/アウトa Bootstrap 3 modal

Bootstrap 3 modal に「フェード」クラスを指定しましたが、モーダルは期待どおりにフェードインおよびフェードアウトしません。フェードインするのではなく、上からスライドするように見えます。

モーダル：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

トリガーボタン：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

「フェード」効果がどのように見えるかを示す例を示すために、次の例を作成しました。 http://jsfiddle.net/spQp5/

このようにして、モーダルを「フェードイン」または「フェードアウト」するにはどうすればよいですか？

javascriptjqueryhtmlcsstwitter-bootstrap-3
8
henrywright

ブートストラップモーダルはデフォルトでフェードインします。多分それはあなたが見るにはあまりにも速くフェードインしていますか？ CSSを見ると、0.15秒間フェードインするようにトランジションが設定されていることがわかります。

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

デモ目的でフェードインを1秒に変更すると、実際にフェードインしていることがわかる場合があります。

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
8
david

トランジションはCSSにあり、モーダルをアニメーション化して下にスライドさせます。 LESSを使用している場合は、これらの行をmodal.lessで変更して、mixinまたはcomponent-animations.less（または独自の）で提供されるトランジションミックスインを使用して、必要な動作を得ることができます。

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0)}

LESSまたは公式のSassポートを使用していない場合は、スタイルシートのカスケード動作を利用して、bootstrap.cssファイルの後に読み込まれるカスタムcssファイルにオーバーライドを追加できます。

 .modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);

 }
10
jme11

コードのフィドル： http://jsfiddle.net/KqXBM/

JQueryのfadeOutメソッドを参照していますが、これはBootstrap fadeクラスが行うこととは異なります。この効果を達成する必要がある場合は、 BSのライブラリ、jQueryを使用します。

0
punund