【javascript】ダイアログのエフェクトもCSSアニメーションとの合わせ技ですっきり

こんにちは。
モーダルウィンドウのライブラリを今回はご紹介します。

サンプルで作ってみました。
※いつもどおり、古いブラウザだと動かないかもしれません。

See the Pen bNePLV by Tsukasa Nagata (@nt-uni) on CodePen.0

Dialog Effects

Screen Shot 2014-12-22 at 18.34.24
Dialog Effects | Sandra

今回はここのライブラリから、Sandraというテーマで作成しました。

<div id="somedialog" class="dialog">
    <div class="dialog__overlay"></div>
    <div class="dialog__content">
        <h2><strong>Howdy</strong>, I'm a dialog box</h2><
div><button class="action" data-dialog-close>Close</button></div>
    </div>
</div>

ダイアログ自体は上記のようにマークアップします。

CSSはテーマごと作られていますので、こちらからDLしてください。

ちなみにSandraというテーマのCSSは以下のような感じです。

.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.dialog.dialog--open .dialog__content {
    animation-name: anim-open;
}

.dialog.dialog--close .dialog__content {
    animation-name: anim-close;
}

@keyframes anim-open {
    0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes anim-close {
    0% { opacity: 1; }
    100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

どうでしょう、見覚えがありますか?
keyframesをつかったcssアニメーションは以前ご紹介しておりますので、是非参照してください。

【CSS】@keyframesって何?CSSのアニメーションを知る | unitopi

javascriptでアニメーション動作を管理

アニメーションの動作自体はCSSですが、クリックする、閉じるといった動作に応じて、javascriptで管理します。

CSSと同様こちらからDLしてください。

  • classie.js
    • 要素から簡単にクラスを追加したり削除したりできるライブラリ
  • dialogFx.js
    • 本ライブラリのコア

を使っています。classieはjQueryだと簡単にできることなんですが、今回jQueryを使ってないので導入必須です。

そのうえで、対応させるために以下のようなスクリプトを足しています。

(function() {
    var dlgtrigger = document.querySelector( '[data-dialog]' ),
    somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
    dlg = new DialogFx( somedialog );

  dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );

})();

まとめ

作り方としてはだいぶ雑なご紹介になってしましたが、前回の記事( 【CSS】@keyframesって何?CSSのアニメーションを知る | unitopi)でお話した通り、javascriptと合わせての応用的なご紹介でした。

フォローして続編をチェック

@universionsをフォロー