Working with multi-state animations

In this recipe, we'll work with Angular animations containing multiple states. This means that we'll work with more than two states for a particular item. We'll be using the same Facebook and Twitter cards example for this recipe as well. But we'll configure the state of the cards for their state before they appear on screen, when they're on screen, and when they're about to disappear from the screen again.

Getting ready

The project for this recipe resides in chapter04/start_here/ng-multi-state-animations:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, and you should see the app as follows:

Figure 4.2 – ng-multi-state-animations app running on http://localhost:4200

Now that we have the app running locally, let...