さて、ナビが出てくる所の動きは理解出来た。
後googleナビに近づけるためには、ナビの上下の動きがどうもカクカクした感じがあるので、何とかならんかと本家を見てみた。

google のソースでは、ナビ内をスライドすると、

transition : -moz-transform 0ms ease-in-out 0s

がついて、

transform の値が translate3d(0px, -109px, 0px) のようになる。

これを再現するには。。

touchstart、touchmove, touchendの部分をちょっと変えます。

こんな具合に。

そして、touchmove時に移動距離=moveYが0以下、またはscreen.height – menu_list_heightを超える場合、
戻る処理を与える。

なんで、まずフラッグを立てて、

var mflag = false;

戻す処理が必要な場合はそれを立てる。

moveY_bが戻り値。

それで、touchendの時に戻してやると。

これでちょっとは近づいたか。。

easingについては、
http://easings.net/
を参考に。


Leave a Reply

Your email address will not be published. Required fields are marked *