Developer's Blog

iPhone / Android 向けウェブページでの transform:translate3d 導入 解決編

WebDevBlogTitle

こんにちは。 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 の不具合はまだあるので、また機会があれば紹介します。


Copyright © 2019 Fenrir Inc. All rights reserved.