The CSS transitions

Like before, we have the following six CSS classes at our disposable, prefixed with the name of our group transition, 'card': card-enter-active, card-enter, card-enter-to, card-leave-active, card-leave, and card-leave-to. They will be applied to the direct children of the group transition, that is, our cards components.

1. The group transition has an additional class applied to moving items--v-move. Vue will use the CSS transform property on the items to make them move, so we just need to apply a CSS transition on it with at least a duration:

      .card-move {
        transition: transform .3s;
      }      

Now, when you click on a card to play it, it should disappear and the remaining cards will move to their new position. You can also add cards to the hand.

1. Select the main component in the Vue devtools and execute this into the browser console:

      state.testHand.push($vm.testDrawCard())

Selecting a component in the devtools exposes it in the browser console as $vm.

Like we did for the hand, we will also add animations for the cards when they enter the hand, and when they are played (and thus leave the hand).

1. Since we need to transition multiple CSS properties on the card with the same timings all the time (except during the leave transition), we will change the .card-move rule we just wrote into this:

      .card {
        /* Used for enter, move and mouse over animations */
        transition: all .3s;
      }

1. For the enter animation, specify the state of the card for the start of the transition:

      .card-enter {
        opacity: 0;
        /* Slide from the right */
        transform: scale(.8) translateX(100px);
      }

1. The leave animation requires a few more rules since the play card animation is more complex, and involves zooming the card upward:

      .card-leave-active {
        /* We need different timings for the leave transition */
        transition: all 1s, opacity .5s .5s;
        /* Keep it in the same horizontal position */
        position: absolute !important;
        /* Make it painted over the other cards */
        z-index: 10;
        /* Unclickable during the transition */
        pointer-events: none;
      }

      .card-leave-to {
        opacity: 0;
        /* Zoom the card upwards */
        transform: translateX(-106px) translateY(-300px) scale(1.5);
      }

This is enough to make your cards all properly animated. You can try playing and adding cards to the hand again to see the result.