Can CSS keyframe animation be used in Angular'

Question

Here's a simple Plunkr that animates the insertion of items in a list. This uses -webkit-transform to scale insertions from scale(0) to scale(1). Switching the ng-animate="'insert'" to ng-animate="'fader'" will use Javascript animation to insert the items.

But: I'd like to be able to use CSS keyframe animation here instead. The last entry in the list is hard-coded and uses the "float-enter-start" class. I cannot seem to make ng-animate apply this class correctly. It seems like setting ng-animate="''float" should work, but it doesn't. What am I missing?

Answer 1

The reason why your CSS animation code isn't working is because it's using CSS3-Animations and not transitions. Right now AngularJS ngAnimate does not yet support detecting CSS animation- properties (only transition). There is a request to get this fixed this week and it I plan on doing it between Monday and Friday of this week coming up.

In the meantime if you wish to still support this then you can get this to work using a JavaScript animation with nothing inside the function body. All you do is call the done() method after XXXX milliseconds of your CSS animation. Then in your CSS code (since ngAnimate still adds the CSS classes to the element) you can use the same CSS animation code, but just use that total duration inside of the function body inside of a set timeout.

Here's the code for that. Just include your CSS code from before to do the actual animation. https://gist.github.com/matsko/5426873