Help us understand the problem. What is going on with this article?

【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
homusuke
未経験者のメモ書き。とはいえせっかく公開するのであれば他人が読んでも理解できるものをと心がけつつも達成できていない。
https://yurubo.org
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした