🧊

Html5, Css3関連で最近知ったことのメモ

取り留めもないけれども一応メモメモ。
新しい発見は楽しいんやけど、知らないことが多すぎていかんね!

参考:Events and responding to the user demos

classList API

参考:HTML5 classList API

jQueryでやってたtoggleClassとかがネイティブのAPIになるとか。
ほかにもaddとかremoveとか、hasClassも。

まだ使える環境少なかったり、jQueryのそれほど便利じゃなかったりもするみたいやけど、期待!

サンプル

transitionEnd

今までアニメーションといえば、marginやったりpositionやったりでグイグイやるのが主流やったのが、最近ではGPUアクセラレーターのために、アニメーションはCss3で実装する流れになりそう?らしい。

アニメーションをJavaScriptじゃなくてCss3のtransitionとかで制御しちゃうと、そっからイベント取れへん!かとおもいきや、それ用のイベントがちゃんとあるのね。

document.addEventListener('webkitTransitionEnd', function(e) {
    console.log(e);
}, false);

ってしとけば、transitionでアニメーションが終わったやつを教えてくれるという。

参考:Deferred を使おう:CSSトランジション終了の検知 | _level0 | Kayac Interactive Designer's Blog

奥が深い!

WebKitCSSMatrix

transformとかでアニメーションさせた要素の情報を取得する用APIがあるらしい。

参考:WebKitCSSMatrix Class Reference

スマートフォン系のUIを作る時に、現状把握のためにDOMを漁ることはよくあると思うけど、その時に使える感じ。

三角関数わかりません・・。