Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation flickering with pagination

See original GitHub issue

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>

Issue Analytics

State:
Created 8 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

LeleDevcommented, Oct 15, 2015

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

0reactions

LeleDevcommented, Oct 15, 2015

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