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 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.
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.