順番

Web

Nuxt3でtransitionした時の順番が思ってるのと違った

Nuxt3でapp.vueにtransitionを設定した際、なんかうまくいかないなと思い、試したことのメモ。環境は以下。

node v20.10.0
vue: 3.4.3
nuxt 3.9.1
vuetify 3.4.10

公式に記述されているフックの記述順が以下なので、上から順番に動いていくと思っていました。

// called before the element is inserted into the DOM.
// use this to set the "enter-from" state of the element
function onBeforeEnter(el) {}

// called one frame after the element is inserted.
// use this to start the entering animation.
function onEnter(el, done) {
  // call the done callback to indicate transition end
  // optional if used in combination with CSS
  done()
}

// called when the enter transition has finished.
function onAfterEnter(el) {}

// called when the enter transition is cancelled before completion.
function onEnterCancelled(el) {}

// called before the leave hook.
// Most of the time, you should just use the leave hook
function onBeforeLeave(el) {}

// called when the leave transition starts.
// use this to start the leaving animation.
function onLeave(el, done) {
  // call the done callback to indicate transition end
  // optional if used in combination with CSS
  done()
}

// called when the leave transition has finished and the
// element has been removed from the DOM.
function onAfterLeave(el) {}

// only available with v-show transitions
function onLeaveCancelled(el) {}
Vue.js
Vue.js - The Progressive JavaScript Framework

しかし、思い通りにいかなかったので、キャンセル以外にconsole.logを埋め込んでみると、思ってたのと違うことが判明。自分のマシンだと以下の順番で実行されます。試しに、サーバーにのせてみても同様です。やっぱり、こっちが正しいんですかね。

  onBeforeLeave: () => {
    console.log('beforeLeave');
  },
  onLeave: (_, done) => {
    console.log('leave');
    done();
  },
  onBeforeEnter: () => {
    console.log('beforeEnter');
  },
  onAfterLeave: () => {
    console.log('afterLeave');
  },
  onEnter: (_, done) => {
    console.log('Enter');
    done();
  },
  onAfterEnter: () => {
    console.log('afterEnter');
  }

そこで、copilotに尋ねるといい感じの答えをもらいました。以下がその答え。なるほどね。

公式ドキュメンテーションでは、フックが呼び出される順序ではなく、フックの役割と使用方法に焦点を当てて説明しています。各フックが何をするのか、いつ使うべきなのかを理解することが、Vue.jsのトランジションシステムを効果的に利用するための鍵となります。
それぞれのフックが独立して機能し、特定のタイミングで呼び出されるため、公式ドキュメンテーションではそれぞれのフックを個別に紹介しています。しかし、これらのフックがどのように連携して動作するか（つまり、実際の呼び出し順序）は、具体的な使用ケースやアプリケーションの状態によります。
したがって、公式ドキュメンテーションはフックの「役割」に焦点を当て、その「順序」は具体的な実装や使用ケースに委ねていると言えます。このアプローチは、開発者が自分のニーズに合わせてフックを自由に組み合わせて使用できるようにするためのものです。

コメント