Like we did with the hand, we will use a transition to animate the overlay.
- 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>
- 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.