Vue.js 2 Web Development Projects

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>  <div 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 ...