Key attribute

For now, if you try the animation in the browser, it should only work in two cases:

• When you don't have any overlay displayed, and you set one
• When you have an overlay shown and you set activeOverlay to null to hide it

If you switch between the overlays, the animation will not work. This is because of the way Vue updates the DOM; as we saw earlier in the The key special attribute section, it will reuse DOM elements as much as possible to optimize performance. In that case, we will need to use the key special attribute to give Vue a hint that we would like to treat the different overlays as separate elements. So, when we transition from one overlay to the other, both will be present in the DOM, and the animations can be played.

Let's add the key to our overlay component so that Vue will treat it as multiple separate elements when we change the activeOverlay value:

<transition name="zoom">
  <overlay v-if="activeOverlay" :key="activeOverlay">
    <component :is="'overlay-content-' + activeOverlay" :player="currentPlayer" :opponent="currentOpponent" :players="players" />
  </overlay>
</transition>

Now, if we set activeOverlay to 'player-turn', the overlay will have a key of 'player-turn'. Then, if we set activeOverlay to 'last-play', an entirely new overlay will be created with a key of 'last-play', and we can animate the transition between the two. You can try this in the browser by setting different values to state.activeOverlay.