【vue】トランジションのあらゆるタイミングでjsを走らせる【トランジションフック】

概要

トランジションが発生したタイミングでjsを処理させたいときに便利な機能

#例

トランジションの中でも、以下のタイミングでjsの処理をさせてみる。

1. DOMに要素が追加された後(enter)
2. トランジションが終わるとき (after-enter)

規定に沿ったフック名をtransition要素に与えることで、各タイミングで処理が走る。

.html

<div id="app">
  <button v-on:click="hook = !hook">hook</button>
  <transition v-on:enter="enter" v-on:after-enter="afterEnter">
    <div v-if="hook">example</div>
  </transition>
</div>

.js

new Vue({
  el: '#app',
  data: {
    hook: true
  },
  methods: {
    /*1.DOMに要素が追加された後の処理*/
    enter: function(el, done) {
      console.log('enter')
      setTimeout(done, 1000)
    },
    /*2. トランジションが終わるときの処理*/
    afterEnter: function(el) {
      console.log('after-enter')
    }
  },
})

#トランジションのタイミング

トランジションが発生するタイミングとして下記のように分類できる。

• 要素が追加されるとき
• 要素が削除されるとき

さらに細かく分類したときのフック名は以下の通り

###要素が追加されるとき(Enterフェーズ)

1. DOMに要素を追加: before-enter
2. v-enterを追加: enter
3. トランジション終了: after-enter
4. Enterフェーズが途中でキャンセル: enter-cancelled

###要素が削除されるとき(leaveフェーズ)

1. クラス付与前: before-leave
2. .v-leaveが追加後: leave
3. 要素削除後: after-leave
4. leaveフェーズが途中でキャンセル: leave-cancelled