This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Getting started with $animateCss and Angular

2:30 Angular 1.x lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Eric

Just as an aesthetic/UX suggestion for when anyone goes to actually implement this in a project, stagger should be no more than 0.1 otherwise the animation is too slow. I found it looked best/most fluid at 0.05. :D

Avatar
ReGGaeBOSS

How can i use this with ng-enter/ng-leave, in other words how to I use JS animations for page transitions?

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.

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.

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.

Then, just double check to make sure our class names match.

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

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.

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.

One thing we couldn't do before with ngAnimate was do staggering animations with JavaScript-based animations. Now we can.

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.

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.

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.


Featured course:

Create an SVG Icon System

Create an SVG Icon System

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?