こんにちは。 Web 担当の真谷（シンガイ）です。
前回、疑問編ということで、スマートフォンでなめらかなアニメーションを表現する為に transform:translate3d を使用した場合に、Android では要素によっては不具合が発生する件について書きました。今回はその解決方法をご紹介します。
解決後のサンプル
まずは前回の解決後のサンプルをご覧ください。
（move を押下すると テキストフィールドが 70px 移動し、もう一度押下すると戻ります。）
動作確認環境：iPhone / Android
前回確認を行った、Xpelia・Nexus One・Galaxy S 等の Android 端末で確認を行いましたが、フォーカス要素がちゃんと移動後の位置に来ている事を確認できました。
以下が JavaScript の抜粋になります。※要 jQuery
if($("#search").hasClass("view")===false){
$('#search_txt').css({
'-webkit-transform':'translate3d(0,70px,0)',
'-webkit-transition':'-webkit-transform 500ms cubic-bezier(0,0,0.25,1)'
}).one("webkitTransitionEnd", function(){
$('#search_txt').css({'top':'70px','-webkit-transform':'','-webkit-transition':''});
});
}else{
$('#search_txt').css({
'-webkit-transform':'translate3d(0,-70px,0)',
'-webkit-transition':'-webkit-transform 500ms cubic-bezier(0,0,0.25,1)'
}).one("webkitTransitionEnd", function(){
$('#search_txt').css({'top':'0px','-webkit-transform':'','-webkit-transition':''});
});
}
やっている事は単純で、translate3d での移動後に、6行目で 「position:top を70px 移動」 「transform・transition の解除」をやっています。
11行目の戻す場合に translate3d の Y の値に -70px 入れているのは、「一度 transform 解除をした場合、再設定をした時点の座標が始点になる」ということがあり、0px を指定せずに、-70px を指定しています。
今回やった解決方法はあまり褒められたものではないので、 Android で translate3d を使う場合は要素を選んで行った方がいいかなと思います。
その他にも Android の場合で確認出来る HTML・CSS の不具合はまだあるので、また機会があれば紹介します。
関連記事
