Bootstrap Modal の fade 或いは fade in の仕組み

Bootstrap の Modal.js を使う場合、呼び出される側の要素に fade などが記載されている。例えば

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

のようなものである。Module によっては "fade in" と指定することもできるが、この辺りの挙動をみるために、本体の less を見てみる。すると、fade のみ場合はスライドダウンしながら Modal が登場するが、fade in の場合は、スライドダウンの効果は発生しない、模様。

bootstrap / less / modals.less

本体は、こんなかんじになっている。

https://github.com/twbs/bootstrap/blob/master/less/modals.less

// Container that the modal scrolls within
.modal {

(snip)

  // 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)}
}

ちなみにすべての Module で fade や fade in が使えるとは常に限らないのでドキュメントなりを読んで追従することが大事だろう。