スマフォアプリ作成４０：CSSアニメーションを組み込む

予定通り、CSSアニメーションを使います。
一覧画面右端に見えている画面に対して右から左に指をスライドすると
画面んが左にアニメーションしてでてきます。

この部分が今まではtimer(setInterval)を使ったアニメーションだったので
CSSに変更します。


[scheduler.css]

#filter{　･･･①

　～
　transition-property: left;

　transition-duration: 200ms;

　transition-timing-function: ease-out;

　transition-delay: 0;

}


[scheduler.js]

//フィルター画面オープンイベント

ctr.onFilterOpen = function(){

　view.disabledEvents();

　ById('filter').style.left = "20%";　･･･②

};

[解説]
①前回説明したtransition関連のプロパティを設定します。
　アニメーション対象をleftプロパティに設定し、時間は200ミリ秒
　終わりをゆっくり、即時に始めるようにしています。
②今まではsetIntervalで定期的に関数呼んで、その中でleftを
　変更して移動としていましたが、見ての通り、leftをセットする
　だけになります。

アニメーション部分のコードがjsから無くなり、大分シンプルに
なりました。
変更する時も、ソースを追ったり変更の影響を考える必要が
無いので簡単に変更できるようになります。

サンプル
http://trapz.web.fc2.com/blog/20130520/scheduler.html