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

2012/08/22 00:09:22

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

参考：Events and responding to the user demos

参考：HTML5 classList API

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

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

今までアニメーションといえば、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

奥が深い！

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

参考：WebKitCSSMatrix Class Reference

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

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