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.

We’ll configure the following states for both cards:

• The state when a card appears on the screen.
• The state when the user hovers over a card.
• The state when the user moves the mouse away from the card.

Getting ready

The app that we are going to work with resides in start/apps/chapter04/ng-multi-state-animations inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-multi-state-animations
   

   This should open the app in a new browser tab, and you should see the following...