Animating the hand with transitions

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.

1. 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,
        // ...
      }

1. 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" />

1. Now, if you change state.activeOverlay to any truthy value in the browser console, the hand will disappear:

      state.activeOverlay = 'player-turn'

1. Also, if you set it back to null, the hand will be shown again:

      state.activeOverlay = null

1. To apply a transition when a component is added or removed by a v-if or v-show directive, surround it with a transition component like this:

      <transition>
        <hand v-if="!activeOverlay" />
      </transition>

Note that this also works on HTML elements:

<transition>
  <h1 v-if="showTitle">Title</h1>
</transition>

The <transition> special component will not appear in the DOM, like the <template> tag we used in Chapter 2, Markdown Notebook.

When the element is added to the DOM (the enter phase), the transition component will automatically apply the following CSS classes to the element:

• v-enter-active: Apply the class while the enter transition is active. This class is added before the element is inserted to the DOM, and it is removed when the animation finishes. You should add some transition CSS properties in this class and define their duration.
• v-enter: The starting state of the element. This class is added before the element is inserted, and it is removed one frame after the element is inserted. For example, you could set the opacity to 0 in this class.
• v-enter-to: The target state of the element. This class is added one frame after the element is inserted, at the same time v-enter is removed. It is removed when the animation finishes.

When the element is being removed from the DOM (the leave phase), they are replaced by the following:

• v-leave-active: Applied while the leave transition is active. This class is added when the leaving transition triggers, and it is removed after the element is removed from the DOM. You should add some transition CSS properties in this class and define their duration.
• v-leave: The starting state of the element when being removed. This class is also added when the leaving transition triggers and is removed one frame after.
• v-leave-to: The target state of the element. This class is added one frame after the leaving transition triggers, at the same time v-leave is removed. It is removed when the element is removed from the DOM.

During the leave phase, the element is not immediately removed from the DOM. It will be removed when the transition finishes to allow the user to see the animation.

Here is a schema that summarizes the two enter and leave phases, with the corresponding CSS classes:

The transition component will automatically detect the duration of the CSS transitions applied on the element.

1. We need to write some CSS to make our animation. Create a new transitions.css file and include it in the web page:

      <link rel="stylesheet" href="transitions.css" />

Let's try a basic fading animation first. We want to apply a CSS transition on the opacity CSS property for 1 second.

1. To do that, use both the v-enter-active and v-leave-active classes since it will be the same animation:

      .hand.v-enter-active,
      .hand.v-leave-active {
        transition: opacity 1s;
      }

When the hand is either being added or removed from the DOM, we want it to have an opacity of 0 (so it will be fully transparent).

1. Use both the v-enter and v-leave-to classes to apply this full transparency:

      .hand.v-enter,
      .hand.v-leave-to {
        opacity: 0;
      }

1. Back to the main template, surround the hand component with a transition special component:

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

Now, when you hide or show the hand, it will fade in and out.

1. Since we may have to reuse this animation, we should give it a name:

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

We have to change our CSS classes, because Vue will now use fade-enter-active instead of v-enter-active.

1. In the transition.css file, modify the CSS selector to match this change:

      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 1s;
      }

      .fade-enter,
      .fade-leave-to {
        opacity: 0;
      }

Now, we can reuse this animation on any element with <transition name="fade">.