06月02日
jQTouchちらつき対応(6/4追記)
ここ数日jQTouchでiPad用ローカルアプリを作ってるんですが、jQTouchオフィシャルではiPad用に2カラムを制御するための仕様策定が進んでいるようですね。
お手軽にiPhone・iPadの動きを伴ったjQTouchですが、画面遷移時に遷移後の画面が一瞬チラついたりして少し微妙な点があります。ソースを追って見たところ、アニメーションにはCSS3のアニメーション機能を使っているようです。
アニメーションを開始させるタイミングで、適したCSSをJSで指定してあげることで要素をアニメーションさせ、終わった段階でアニメーション用CSSを外してあげる。
ちらつきが発生する原因としては、アニメーション終了でCSSを外す時に同時にdisplay:noneになるのですが、ブラウザの仕様（？）で一瞬ちらつくみたいです。
ということで色々と対策を考えてdisplay:noneだけタイミングをずらしてみたりとか試してみたのですが上手く行かず。。。で、ググって見たら出てきました…orz
jqtouch.js
JAVASCRIPT:
-
function animatePages(from, ...
-
-
scrollTo(0, 0);
-
-
// 追加ここから
-
var toStart = 'translateX(' + (backwards ? '-' : '') + window.innerWidth + 'px)';
-
// 6/4追記ここから
-
if (animation.name == 'slideup' && backwards != true) {
-
toStart = 'translateY(0px)';
-
}
-
// 追記ここまで
-
fromPage.css( 'webkitTransform', toStart );
-
// 追加ここまで
-
-
var callback = function(event) {
-
// 追加1行
-
fromPage.css( 'webkitTransform', '');
-
-
if (animation)
（元ネタのページは失念です。。。）
元のソースに手を入れるのは気が引けるところですが、これでバッチリちらつきを無くすことが出来ます。お悩みの方は是非お試し下さいませ。
(6/4追記)
slideupのアニメーションで、遷移前のページが消えてしまう為、ソース改変の一部を変更しました。
ちなみにドキュメントには書かれてない（？）と思うんですが、縦スライドさせたいときは「slideup」ですが、任意で横スライドさせたい場合は「slide」です。
[iPhone OS][jQTouch]iPhoneOSにも対応が迫られているざんす。
不毛だなーとはおもうけれども専用サイトをつくることになって頑張っている。 ライブラリとして選択したのはjQTouchというライブラリ。 xm2jsonも使って既存サイトのxmlデータを取り込ん…
掲載日： 2010年06月3日 1:36 PM by kenmituoの日記