AngularJSでのプログレストラッカーのチラつき防止とng-ifとng-showのお話。
結論。
AngularJSでプログレストラッカー部を表示する場合、
特に画像でなく、テキストとCSSで構成しているような場合は、ng-ifにしないと
カクつきやチラつきが生じることがある。
自作のアプリで、プログレストラッカーをこさえているのですが、
※プログレストラッカーについては以下を参照のこと。
その表示も含めて、AngularJSを使っています。
そして、後々は端末毎での画面サイズの違いなどで
意図しない改行や表示にならないよう
画像を使ってプログレス表示部を作ろうとしているものの、
今のところはテキストとCSSで構成してます。
その部分について、ng-showをつかっていたところ、ng-cloakとの関係もあってか、
またCSSで、各プログレスの表示位置を固定せずにli要素として並べているせいか、
ng-showでdisplay:block / noneの切り替えを行なう際に、
チラつきやカクつきが目立ちました。
CSSを真面目に書こうかとも思ったものの、
問題がそこじゃなかった場合のロスが辛かったので、
また、いつか画像でパーツを構成しようとしていたので、
楽に解決する手段がないか考えました。
すると、こういう記事を見つけ、もしかしてこのあたりの考慮が漏れてるが故に
何か想定外の挙動が起きてる?と思って試したところ、見事に解決。
絆創膏かもしれませんが、スピード優先ということで。
<おそらくの学び>
理由がない限りは、もしくは、大規模なDOM生成じゃない限りは、
ng-showじゃなくてng-ifを使用して、都度DOM生成をした方がアニメーションとかも
入ってくるときっと安心。