Define an Angular Trigger and State

Switch Between Angular States on a Trigger

Animate Between Angular States Using Transitions

Control Undefined Angular States with void State

Animate Adding and Removing Angular Elements with ngIf

Delay and Ease Angular Animations

Use Keyframes for Fine-Tuned Angular Animations

Define Two-Way Transitions for Angular States

Animate Angular Web Applications

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

[00:00] By changing this number into a string, we'll start with 05 seconds, we can add other things to it like delay, so I'll say delay one second. When I save and run any of these animations, I'll hit toggle, delay one second, stop, delay one second, go, delay one second.

[00:21] Each of these will have this minor delay between the actual animation time, which is still 05 seconds. Then after that, you could also add in easing, so I'll say ease out. I'll hit save. I'll hit toggle, I'll see a delay, and then it slows down on the way to the end of the animation. We'll make this a bit longer so that's more obvious.

[00:45] I'll make the animation two seconds, the delay one second, and it's easing out. Toggle, then it slows down as it gets to the end. Slows down as it gets to the end, and go, it slows down and gets to the end.

[01:00] For really advanced easing, if you go to the Web animations API on the W3C site, and you scroll down to 3.11.3 to look at the scaling using a cubic Bézier curve, you can see we can also pass in, so we'll have ease, linear ease in, ease out, ease in out.

[01:20] Could also pass in a function that defines this curve that the animation is going to work on. If I were to copy and paste the ease out curve, so cubic Bézier, 0058 and 1, and paste that here inside of the string, this will perform the same behavior, because this curve from X, 0Y, 0and 058 and 1 represents that ease out behavior. You'll see this same behavior there.

[01:51] If you go to easings.net and you pick one of these functions, we'll try ease in out quad, and you grab the cubic Bézier defined here. We'll copy this and paste this here. You'll see this ease in out quad behavior, so when I hit toggle, it eases in, and eases out. Eases in, this is again after that one second delay, and eases out. Delay, then ease in and ease out.

[02:20] This easings.net site will pretty much have you covered for any of the easings you can achieve through cubic Bézier. Even one like ease out back that would...this one will overshoot, because you see 1.2 goes greater than 1.

[02:36] When I paste this in here, you'll see this animation will go a bit too far and then come back, so we'll toggle, delay, come a bit too far, and then come back. Stop. Bit too far, and then come back.

[02:49] You get a lot of power with these, and you can just come in and copy paste those cubic Béziers or save them as strings somewhere. You can [inaudible] in.

[02:57] Some of these, the more advanced ones, you'll see at the bottom here, like ease in out bounce, have too many steps in it to allow a CSS representation of it, so you're going to have to represent that in Angular 2 using something like key frames.

Course

Animate Angular Web Applications

Delay and Ease Angular Animations

Share this video with your friends