実際のコード

HTML側

transition を指定

<template>
  <transition name="app-modal" v-on:after-enter="afterEnter" v-on:leave="leave">
    <div id="overlay" v-on:click="clickEvent">
      <div id="content" v-on:click="stopEvent">
        <p><slot></slot></p>
        <button @click="clickEvent">close</button>
      </div>
    </div>
  </transition>
</template>

JavaScript側

以下のイベントがフックされるようになる

Vue.transition('expand', {
  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
     // 取り消しハンドル
  },

  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
    // 取消しハンドル
  }
})

実際のソースおよび実行結果