Vue.js 2 Web Development Projects

Waiting for the card transition to end

When the card is played, which means removed from the hand card list, it triggers a leaving animation. We would like to wait for it to finish before continuing. Fortunately, the transition and transition-group components emit events.

The one we need here is the 'after-leave' event, but there are other events corresponding to each phase of the transitions--'before-enter', 'enter', 'after-enter', and so on.

1. In the hand component, add an event listener of the type 'after-leave':

      <transition-group name="card" tag="div" class="cards" @after-               leave="handleLeaveTransitionEnd">

2. Create the corresponding method that emits a 'card-leave-end' event to the main template:

      methods: {        // ...        handleLeaveTransitionEnd ...