Hatena::ブログ(Diary)

知のレバレッジを最大化せよ このページをアンテナに追加 RSSフィード Twitter

2014-02-28

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 が使えるとは常に限らないのでドキュメントなりを読んで追従することが大事だろう。

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/mabots/20140228/1393591647
リンク元
スマートフォン解析