Solution Review: Create Sequential and Parallel Animations

To summarize the challenge, you were asked to create a sequential enter animation and a parallel exit animation with the following configurations:

Enter animation

A sequential animation that plays one after the other:

• Original state: It has an opacity of 0 and is scaled down to 0.5 of its original size.

• First animation: It fades in from an opacity of 0 to 1 for 500ms. .

• Second animation: It scales up to its original size for 300ms .

Exit animation

A parallel animation that plays together:

• It fades out to an opacity of 0 for 500ms .

• It rotates 360deg for 300ms as it fades out.

Step 1: Create the sequential enter animation

Create an animation trigger called boxAnimation and the :enter transition (lines 16-18). Add the sequential animations using Angular animation’s sequence function (lines 19-26).