From the course: Angular: Animations

Unlock the full course today

Join today to access over 22,700 courses taught by industry experts or purchase this course individually.

Parallel animation with groups

Parallel animation with groups - Angular Tutorial

From the course: Angular: Animations

Start my 1-month free trial

Parallel animation with groups

“

- [Instructor] Aside from defining stepped sequential property changes over the duration of an animation, we can also allow property changes to run at various times, in parallel with one another. This is accomplished by defining a series of animate commands within a single group. Just as we've done before, inside of our basic component, we're going to create a new button in our button group to trigger this state change. So, I'll paste that in, and this time, we're setting the state to a string of parallel, and the label is Parallel Animation. Go ahead and save this, we're done here. And then hop on over to our animboxcomponent, and just as we added key frames in our import to take care of stepped animation, for parallel animation, we need to go ahead and add in group. So, make sure that group is added in right after keyframe, and then we can define our state. So, right down after the step state, we're going to paste in this state definition from our snippets file. And again, we're…

Contents