Vue.js 2 Web Development Projects

A prettier animation

We will now make a more complex but better animation, with some 3D effects. In addition to the hand, we will animate the .wrapper element (for a 3D flip) and the .card elements. The cards will start being piled up and will progressively expand to their expected position in the hand. At the end, it will animate as if the player is picking up the cards from a table.

1. Start by creating new transition CSS classes with the 'hand' name instead of 'fade':

      .hand-enter-active,      .hand-leave-active {        transition: opacity .5s;      }      .hand-enter,      .hand-leave-to {        opacity: 0;      }

2. Change the transition name in the main template too:

      <transition name="hand">        <hand v-if="!activeOverlay" :cards="testHand" />      </transition>

3. Let's animate the ...