僕のノート、見てってください

エンジニアリングや英語、趣味について徒然なるままに

AngularJSでのプログレストラッカーのチラつき防止とng-ifとng-showのお話。

結論。

AngularJSでプログレストラッカー部を表示する場合、

特に画像でなく、テキストとCSSで構成しているような場合は、ng-ifにしないと

カクつきやチラつきが生じることがある。

 

自作のアプリで、プログレストラッカーをこさえているのですが、

プログレストラッカーについては以下を参照のこと。

coliss.com

 

その表示も含めて、AngularJSを使っています。

そして、後々は端末毎での画面サイズの違いなどで

意図しない改行や表示にならないよう

画像を使ってプログレス表示部を作ろうとしているものの、

今のところはテキストとCSSで構成してます。

 

その部分について、ng-showをつかっていたところ、ng-cloakとの関係もあってか、

またCSSで、各プログレスの表示位置を固定せずにli要素として並べているせいか、

ng-showでdisplay:block / noneの切り替えを行なう際に、

チラつきやカクつきが目立ちました。

 

CSSを真面目に書こうかとも思ったものの、

問題がそこじゃなかった場合のロスが辛かったので、

また、いつか画像でパーツを構成しようとしていたので、

楽に解決する手段がないか考えました。

 

すると、こういう記事を見つけ、もしかしてこのあたりの考慮が漏れてるが故に

何か想定外の挙動が起きてる?と思って試したところ、見事に解決。

絆創膏かもしれませんが、スピード優先ということで。

 

http://oahiroaki.tumblr.com/post/79633563937/angularjs-ng-if-ng-show

oahiroaki.tumblr.com

 

 

<おそらくの学び>

理由がない限りは、もしくは、大規模なDOM生成じゃない限りは、

ng-showじゃなくてng-ifを使用して、都度DOM生成をした方がアニメーションとかも

入ってくるときっと安心。