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

[matsko]

@mike-suggitt the bug is consistent across 1.2 and 1.3 for all browsers. Basically if you start toggling the button before your five second timeout has passed then it permanently caches the class details thus not allowing for anything to work.

1.3 (try with Chrome and Firefox):
http://jsfiddle.net/mDVgX/47/

1.2 (try with Chrome and Firefox):
http://jsfiddle.net/mDVgX/48/

[matsko]

I'm working on a fix at the moment.

[matsko]

Here's the fix: http://jsfiddle.net/mDVgX/51/.

I'm working on the tests for this now and then I'll merge into 1.2 and 1.3.