javascript - stop animation in angularjs when filtering ng-repeat -

javascript - stop animation in angularjs when filtering ng-repeat -

i have angular web application when loads list of "notes" scope array called notes.

this list filtered within ng-repeat so:

<div class="noteclass" ng-repeat="n in notes | propertyfilter: 'fields.notetabnumber' : selectedtab">

this works fine, , have added css animations css file when new item added notes array, animates scene.

div.noteclass.ng-enter, div.noteclass.ng-leave, div.noteclass.ng-move { //my animations here } div.noteclass.ng-enter, div.noteclass.ng-move { //my farther animation functions } div.noteclass.ng-enter.ng-enter-active, div.noteclass.ng-move.ng-move-active { /// finished animations }

my issue filter, can see, list filtered custom filter called propertyfitler filters notes based on 'tab' user has selected.

which simple ul:

<ul> <li ng-class="{selected: selectedtab==1}">...</li> <li ng-class="{selected: selectedtab==2}">...</li> <li ng-class="{selected: selectedtab==3}">...</li> </ul>

when ever user clicks different tab, animation items fire, rather filtering list instantly.

how can animate new item list, when user filters list via li item, dont animate alter in list?

you can inject $animate service controller, whatever callback have clicking tab should first phone call $animate.enabled(false). disable animations. phone call $animate.enabled(true) 1 time page has refreshed. knowing when enable animations 1 time again may tricky part. easiest thing utilize $timeout disable animations half sec or so. if don't that, there blog posts out there working out when ngrepeat completes work. or perhaps there obvious , clean solution have not considered.

javascript html angularjs ng-animate