Animating the card list

There are three missing animations for our hand--when a card is either added or removed from the player hand, and when it is moved. When the turn begins, the player will draw a card. It means that we will add a card to the hand cards list, and it will slide from the right into the hand. When a card is played, we want it to go up and grow bigger.

To animate a list of elements, we will need another special component--<transition-group>. It animates the children when they are added, removed, and moved. In a template, it looks like this:

<transition-group>
  <p v-for="item of items" />
</transition-group>

Unlike the <transition> element, the transition group will appear in the DOM as a <span> element by default. You can change the HTML element with the tag prop:

<transition-group tag="ul">
  <li v-for="item of items" />
</transition-group>

In the template of our hand component, enclose the card components with a transition group, specify the name of the transition that we will call "card", and add the "cards" CSS class:

<transition-group name="card" tag="p" class="cards">
  <card v-for="card of cards" :def="card.def" @play="handlePlay(card) />
</transition-group>

Before we can continue, there is one important thing missing--the children of the transition group must be identified by a unique key.