以前、Android の Web ブラウザでは、ドラッグ中は画質を落として反応速度を稼いでいるらしいというのがわかった。ふと、CSS のアニメーションなら、同様に動きの表現のために何かやってくれるんじゃないかと、-webkit-transition を使ってみた。
結論としては、改善せず。普通に javascript で setTimeout 等で element.style.left を変化させたりするのに比べて、フレームレートが上がるようなことはなかった。その代わり、画質の低下もないわけだが。
先日の長押しの件といい、もっとユーザにいろいろいじれるようにして欲しいものである。
ただ、-webkit-transition の使い方がわかったおかげで、FadeIn/Out の処理が簡単に書けるようになったのは嬉しいところ。途中で戻したり、キャンセルしたりは、自分で setTimeout() なんかで実装していると例外処理で頭がパニックしそうだが、そのあたりも勝手にやってくれるようだ。
基本、class に transition のスタイルあり、と無しのものを作っておいて、フェードしたい時は前者を割り当て、したくないときは後者。その後、transition したい style の Property(Opacity とか) に値をセットするだけ。お気楽だ。ただ、IE は 9 でも動かないが。
.fader { -webkit-transition: opacity 1s linear; }
elem.style.opacity=0.0; elem.addEventListener("webkitTransitionEnd", function() { this.className=""; }, false); elem.className="fader"; elem.style.opacity=1.0;
class を複数指定する場合は、ちょっと面倒かな。jQuery とか使うべし？
