How to set an event on the end of a vue js animation?

Question

JavaScript

<template>
  <transition name="task">
    <div class="wrapper" v-if="taskShow" :class="{done : data.done}" ref="task">
      <h5 class="task-title">
        {{data.name}}
      </h5>
      <p>
        {{data.text}}
      </p>
      <div class="buttons-wrapper">
        <a @click="deleteTask(data.id)" class="waves-effect waves-light btn btn-delete"><i class="material-icons">delete_forever</i></a>
        <a @click="showModal" class="waves-effect waves-light btn btn-edit"><i class="material-icons">edit</i></a>
        <a @click="toggleDone(data.id)" class="waves-effect waves-light btn btn-complete"><i class="material-icons">done</i></a>
      </div>
      <modal v-if="modalDisplay" @close="closeModal">
        <h5>Edit task</h5>
        <input @keyup.enter="editTask" type="text" v-model="insertedTitle" placeholder="Add title" ref="input">
        <textarea id="textarea1" class="materialize-textarea" v-model="insertedText" placeholder="Add new description" ref="textarea"></textarea>
        <div class="button-wrapper">
          <a @click="closeModal" class="waves-effect waves-light btn btn-delete"><i class="material-icons">cancel</i></a>
          <a @click="editTask" :disabled="isDisable" class="waves-effect waves-light btn btn-complete"><i class="material-icons">done</i></a>
        </div>
      </modal>
    </div>
  </transition>
</template>

I want that when you click on the delete button, an animation occurs, and after it the element is deleted from the store. I read in the documentation that there is a transitionend event, but apparently I'm doing something wrong.

deleteTask(id) {
       // setTimeout(() => this.$store.dispatch('deleteTaskById', id), 700)
        this.$on('transitionend', () => {
          this.$store.dispatch('deleteTaskById', id)
        })
        this.taskShow = false
      }

There is an option to simply delay the removal for the duration of the animation, but for some reason it seems to me that this is not the best option.

Answer 1

transition has the following hooks:

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>