Flicker when expending or collapsing a node

[logicunit]

Hello,

My grid flickers for some reason when i expend or collapse the node. It almost looks like as if the child nodes are rebuilding one buy one? It works great in your demo. Any idea why it may be flickering with in my app?

thanks you

[diosney]

I was able to reproduce the issue, it seems that it is only happening when ngAnimate is enabled.

In the demo is working properly since ngAnimate is not loaded.

[diosney]

I researched a little more and found out that tr element doesn't allow height animations, and @khan4019 hacked through this by setting display: block; when animation starts, which is causing the flickering.

I'm looking forward some other way to fix this but I don't promise it will be done by today :D

[mathanpec]

Hi @diosney,

Any update on this flickering issue? Am also facing the same.

Thanks, Mathan,

[holimL]

I had similar issue. We wanted quicker response anyway and thus excluded ng-animate, but I couldn't find a workaround with ng-animate.

[manaswi]

Yes, indeed the tree flickers on expand with ng-animate. Here is the solution that worked for me. Add the following to your app.js -

angular.module('Application', ['ngAnimate'])
  .config(function($animateProvider) {
    $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
  });

see detailed post about above here - http://davidchin.me/blog/disable-nganimate-for-selected-elements/

Then, either in a custom template, or in the tree-grid-directive.js file, add the ng-animate-disabled class to the ng-repeat as shown below. This will disable animations on the tree expansions and thus remove the flicker.

<tbody>\n" + " <tr ng-repeat=\"row in tree_rows | searchFor:$parent.filterString:expandingProperty:colDefinitions track by row.branch.uid\"\n" + " ng-class=\"'level-' + {{ row.level }} + (row.branch.selected ? ' active':'')\" class=\"tree-grid-row ng-animate-disabled\">\n" + " <td><a ng-click=\"user_clicks_branch(row.branch)\"><i ng-class=\"row.tree_icon\"\n" +

[TrueDub]

Workaround supplied - closing due to age.

[glalwani2]

@manaswi Its a nice workaround, but its not working for me when my app.js is inside my bundling and minifaction login. Its stange coz my app.js looks same both when minified and otherwise. What could be the reason. I get this error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=appModule&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.8%2F%24injector%2Funpr%3Fp0%3Dn%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A87130%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A105786%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A104528)%0A%20%20%20%20at%20u%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A104761)%0A%20%20%20%20at%20Object.invoke%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A104851)%0A%20%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A103999)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A104122%0A%20%20%20%20at%20t%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A87574)%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A103905)%0A%20%20%20%20at%20ar%20(http%3A%2F%2Flocalhost%3A54355%2Fbundles%2Fjquery%3Fv%3DYYZsnGqeBdSbkO53I9mgno4evnPTMIRNbbwzeQGxyzU1%3A1%3A105952)