Can CSS keyframe animation be used in Angular's ng-animate directive?

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?

You can use the version 1.1.5, this version is supporting keyframe: NgAnimate 1.1.5 Documentation. NgAnimate Samples — Bruno Croys Felthes
– Bruno Croys Felthes, Commented May 27, 2013 at 3:37

matsko · Accepted Answer · 2013-04-20 18:17:00Z

2

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

answered Apr 20, 2013 at 18:17

matsko

22.3k22 gold badges106 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

matsko Over a year ago

CSS Animations are now supported in ngAnimate. Just hop over to the master branch in github and clone and package the code to get an updated version of angular.js

Collectives™ on Stack Overflow

Can CSS keyframe animation be used in Angular's ng-animate directive?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related