ng-repeat visual glitch (previous & new array displayed)

Question

I have a glitch with angular's ng-repeat directive. My HTML is as follow:

<ul ng-show="predictions" id="search-place-predictions">
  <li ng-repeat="prediction in predictions">{{prediction.description}}</li>
</ul>

and $scope.predictions is an Array in my controller, that takes between 0 and 5 items. However, at each update of this array, I have a visual glitch of around .2 second where the PREVIOUS <li> are still displayed, and the <li> from the new version of the array are also displayed on top of it. No amounts of $apply() have been able to solve this.

EDIT: I have a transition: border-top .2s ease-out; style applied to my list items. When commented out, the glitch disappears.

I do! I want the new array to completely replace the old one, and the list to reflect that change right away. Say I have 2 items then 5 items, my list goes from 2 items to 7 items to 5 items... — Cystack, Mar 08 '15 at 07:26
WOW Joe, following your comment I commented out my CSS animations, and now no problem... — Cystack, Mar 08 '15 at 07:29
OK so I have a `transition: border-top .2s ease-out;` on my `

score 3 · Accepted Answer · edited May 23 '17 at 12:22

3

It's not a bug, per se. Some browsers don't support animation, but angular will still delay hiding and showing by the animation length it detects in your CSS. Usually affects IE <= 9.

See this answer for ways to disable animations in angular.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 08 '15 at 07:34

Joe Enzminger

11,110
3
50
75

thanks Joe, this looks like an interesting answer but I don't see how the resource you're linking to can help me disable animations :/ – Cystack Mar 08 '15 at 07:37
great thanks! BTW I'm getting the glitch in Ionic, which may be ill-supported by latest angular :) – Cystack Mar 08 '15 at 07:39
For future reference: this pointed me in the right direction, however I don't use the ngAnimate module so it must be cause by something else. – Cystack Mar 08 '15 at 07:42

ng-repeat visual glitch (previous & new array displayed)

1 Answers1