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;
      }

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

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

1. Let's animate the wrapper element. Use the CSS transform property to apply a 3D transformation to the element:

      .hand-enter-active .wrapper,
      .hand-leave-active .wrapper {
        transition: transform .8s cubic-bezier(.08,.74,.34,1);
        transform-origin: bottom center;
      }

      .hand-enter .wrapper,
      .hand-leave-to .wrapper {
        transform: rotateX(90deg);
      }

The right rotating axis is the horizontal one, which is x. This will animate the cards just as if they were being picked up by the player. Note that there is a cubic-bezier easing function defined to make the animation smoother.

1. Finally, animate the cards themselves by setting a negative horizontal margin so that they will seem to be piled up:

      .hand-enter-active .card,
      .hand-leave-active .card {
        transition: margin .8s cubic-bezier(.08,.74,.34,1);
      }

      .hand-enter .card,
      .hand-leave-to .card {
        margin: 0 -100px;
      }

Now, if you hide and show the hand with the browser console like we did before, it will have a nice animation.