During a game, the hand will be hidden when any overlay is shown. To make the app prettier, we will animate the hand when it is added or removed from the DOM. To do that, we will use CSS transitions together with a powerful Vue tool--the special <transition> component. It will help us work with CSS transitions when adding or removing elements with the v-if or v-show directives.
- First, add a new activeOverlay data property to the app state in the state.js file:
// The consolidated state of our app var state = { // UI activeOverlay: null, // ... }
- In the main template, we will show the hand component only if activeOverlay is not defined, thanks to the v-if directive:
<hand :cards="testHand" v-if="!activeOverlay" ...
