Solution Review: Create Sequential and Parallel Animations
This lesson provides a detailed solution to the challenge discussed in the previous lesson.
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 to0.5
of its original size.First animation: It fades in from an opacity of
0
to1
for500ms.
.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
for500ms
.It rotates
360deg
for300ms
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).
Get hands-on with 1200+ tech skills courses.