ngAnimate cache prevents transitions on added classes in FF

[mike-suggitt]

ngAnimate uses "getElementAnimationDetails" to cache CSS transitions on load but currently i'm aiming to ensure that onload there are no transitions and then after load I assign a class that then enables transitions on new items.

Example sass might be:

.parent {
     .element {}

     &.isloaded {
          .element {
                transition: 5s linear all;
           }
     }
}

if I dynamically apply the "isloaded" class later on then the cache prevents ngAnimate from attaching the relevant "ng-enter" and "ng-enter-active" classes.

If I comment out the cache logic then the element gets re-evaluated and transitions are applied.

P.S seems to work in chrome bizarrely but not in firefox

[matsko]

The cache expires after the requestAnimationFrame is done so it shouldn't keep items in there afterwards. Can you provide some example code from your template or a demo?

[mike-suggitt]

I can try and put something together. Interestingly I can't find requestAnimationFrame method in the code.

I'm using angular v1.2.16 and seperate angular-animate

[matsko]

https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1430

[mike-suggitt]

So are you suggesting that if I force a reflow on the element then the cache should be cleared and then I can go on my merry way with transitions?

[matsko]

I would need to see how your code is put together first.

[mike-suggitt]

so it looks like afterReflow doesn't get called at all after i've assigned the dynamic class

[matsko]

Is this by chance inside of a leave animation or for enter?

[mike-suggitt]

im aiming to use the "enter" animation

[matsko]

OK. Anyway you can post this online somewhere? I can then debug it and figure out what's going on.

[mike-suggitt]

try this? http://jsfiddle.net/mDVgX/41/

[mike-suggitt]

I can trick it into a reflow if I apply a transition to the element receiving the additional class

e.g. {transition:0.01s linear all;}

[matsko]

Yes there is definitely a bug going on here. Even on the latest master it's the same thing.

I'm working on a fix.

PS. Your demo is using a really old version of Angular. In the future please use the latest one via http:/code.angularjs.org/snapshot.

[mike-suggitt]

Yes I know my apologies, just ripped off an existing setup as im pressed for time.

Thanks