Vue.js 2 Web Development Projects

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>

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