Как установить событие на окончание анимации vue js?

Question

[ivankirshin]

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

Хочу чтобы при нажатии на кнопку удалить происходила анимация, и уже после нее элемент удалялся из стора. В документации прочитал, что есть событие transitionend, но, видимо, я что-то делаю не так.

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

Есть вариант просто отложить удаление на время анимации, но почему-то мне кажется, что это не лучший вариант

Answer 1

[lavezzi1]

У transition есть следующие хуки:

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