Animation flickering with pagination

[jscontrust]

I have a flickering problem with combining angularUtils pagination with ngAnimate (Angular 1.4)

I recorded a screen video from it http://www.vidup.de/v/oHhCU/

It looks like all of the records are in the array for a short time:

Is there a fix or workaround?

My CSS

.animate-repeat-tablerow.ng-move,
.animate-repeat-tablerow.ng-enter,
.animate-repeat-tablerow.ng-leave {
    transition:all linear 0.2s;
}

.animate-repeat-tablerow.ng-leave.ng-leave-active,
.animate-repeat-tablerow.ng-move,
.animate-repeat-tablerow.ng-enter {
    opacity:0;
}

.animate-repeat-tablerow.ng-leave,
.animate-repeat-tablerow.ng-move.ng-move-active,
.animate-repeat-tablerow.ng-enter.ng-enter-active {
    opacity:1;
}

My HTML:

    <table>
        <tr dir-paginate='download in downloads | filter: filterDownloads | itemsPerPage: 2 ' class="animate-repeat-tablerow">
            <td>
                {{download.post_title}}
                <p class='font_size_small no_margin'>{{download.download_description}}</p>
            </td>
            <td>
                <span ng-repeat='term in download.terms'>{{term.name}}</span>
            </td>
            <td>                    
                <span ng-repeat='relation in download.download_relations | filter: { "post_type":"product-group" }'>{{relation.post_title}}</span>
            </td>                                   
        </tr>
    </table>    

[vapits]

Could you provide a jsfidlle or something working?

[michaelbromley]

Hi,

I'm aware of this issue, but right now there is no simple fix, other than getting creative with your CSS skills.

For example, if the "leaving" animation is instant (zero duration), then this can solve it.

Please take a look at this answer for a slightly more advanced way of getting around it.

[LeleDev]

+1

[fferraris]

:+1:

[michaelbromley]

@jscontrust I know it's been a long time, so maybe you fixed this already, but how about this:

.animate-repeat-tablerow.ng-move,
.animate-repeat-tablerow.ng-enter {
    transition:all linear 0.2s;
}

.animate-repeat-tablerow.ng-leave.ng-leave-active,
.animate-repeat-tablerow.ng-move,
.animate-repeat-tablerow.ng-enter {
    opacity:0;
}

.animate-repeat-tablerow.ng-leave,
.animate-repeat-tablerow.ng-move.ng-move-active,
.animate-repeat-tablerow.ng-enter.ng-enter-active {
    opacity:1;
}

.animate-repeat-tablerow.ng-leave,
.animate-repeat-tablerow.ng-leave.ng-leave-active {
  transition: all 0s;
}

Plunker: http://plnkr.co/edit/bEvCOVnyKMascsSQzxJD?p=preview

The basic idea is to make sure the outgoing animation (ng.leave -> ng.leave-active) has a zero duration. This allows it to get out of the way before the next page fades in.

Other "plus one" people - does this approach help in your case?

[LeleDev]

It kinda helps, but there is a little flashing at every page change...

I came up with a different workardound instead. I made this directive in order to disable ng-animation on certain elements:

.directive('ngAnimationDisabled', function ($animate) {
   return {
      restrict: 'C',
      link: function (scope, element, attrs) {
         $animate.enabled(element, false);
      }
   };
})

By setting the 'ng-animation-disabled' class to dir-paginate element, I got rid of the ng-animate problem.

Plunkr: http://plnkr.co/edit/WmOcs9ar4HaelyNITcGk?p=preview

[LeleDev]

(I think that this solution could be easier to be integrated with the library, for example renaming 'ngAnimationDisabled' to 'paginateNoNgAnimation' or something similar, and restricting it to attributes with `restrict: 'A'`` )

[michaelbromley]

@LeleDev I think the point is that this is only an issue if you want to animate the list in some way.

Another approach would be to to use the Animate Provider classNameFilter to explicitly limit the elements in your app which get the ngAnimate hooks added.

Again, it doesn't solve the problem that is the subject of this issue (i.e. the specific case where we do want to animate the list in some way).

[LeleDev]

Right, sorry, I was addressing a similar issue - when no animation is added - instead of this one (I mistakenly tought that the 0.2s animation was for a 0s one). Never mind