The overlay animation

Like we did with the hand, we will use a transition to animate the overlay.

1. Add a transition called "zoom" around the overlay component:

      <transition name="zoom">
        <overlay v-if="activeOverlay">
          <component :is="'overlay-content-' + activeOverlay"                    
          :player="currentPlayer" :opponent="currentOpponent"                      
          :players="players" />
        </overlay>
      </transition>

1. Add the following CSS rules in the transition.css file:

      .zoom-enter-active,
      .zoom-leave-active {
        transition: opacity .3s, transform .3s;
      }

      .zoom-enter,
      .zoom-leave-to {
        opacity: 0;
        transform: scale(.7);
      }

This is a simple animation that will zoom out the overlay while fading it out.