ngAnimate 1.4 introduces $animateCss which allows us to interact with css based animations through our Javascript. Learn how to get started creating animations with $animateCss.

Getting started with $animateCss and Angular

[00:00] In this lesson, we're going to talk about how to use the animateCSS service that's in Angular 1.4. Just like before, with Angular 1.2 and up, we can define JavaScript animations with the .animation method. The only difference is animateCSS is a service to help us to define those animations, and it actually taps into CSS animations, so we get the dynamic capabilities of JavaScript with the power and performance of CSS animations.

[00:22] Let's get started. We're going to define a animation for enter on this fade animation. We can just say, "return animateCSS" here, which is a function, and it's going to take an element to animate on, then the object to do configuration. Then we can define the actual animation.

[00:38] We'll just do a basic fade, from an opacity of zero to an opacity of one. Then we also need a duration, so it knows how long to go. Any time in seconds, I'll put half a second here.

[00:57] Then, just double check to make sure our class names match.

[01:00] We have the fade on this [indecipherable] repeat, which is the animation up here. Now, on enter we get that nice fade.

[01:07] We can also do the same thing for leave. We can just copy this, and come down here, and just do the inverse. We'll change this to leave.

[01:14] Again, this is the same as Angular 1.2 and up. Just switch these around to do that. Now we get the animations on enter and leave.

[01:25] One thing we couldn't do before with ngAnimate was do staggering animations with JavaScript-based animations. Now we can.

[01:32] We can just pass in "stagger" and then any time in seconds. Let's do .2 seconds on enter, and also we'll do the same thing for leave. Again, this taps into the CSS stuff, so we get the same capabilities, and now we get to stagger animations.

[01:47] You can also attach keyframe styles here. By using the keyframe style property we can actually attach keyframes that we built in a CSS file somewhere. What that means is, just like you would in CSS, so I have some keyframes, lightspeed, and then we just give it a time, just like you would in CSS.

[02:07] It's going to be overridden by this duration, though. I also have one for leave, so keyframe, style, and let's do the lightspeed out in .1 seconds here. Now, as I do this, we get this different keyframe animation that was defined in a CSS file somewhere. That's animateCSS.

Getting started with $animateCss and Angular

Share this video with your friends