Vue Academy · レッスン

JavaScriptトランジションフック

@before-enter、@enter、@after-enter、@leaveフック、複雑なアニメーションにGSAPを使う方法について学習します。

「JavaScriptトランジションフック」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

JavaScriptフックを使う理由

CSSクラスで対応できるケースはほとんどですが、GSAPのようなライブラリとの連携、canvasのアニメーション、動的な値の計算など、JavaScriptが必要なアニメーションもあります。<Transition>は、まさにそのためのライフサイクルフックを提供します。

利用できるフック

Vueは各フェーズでイベントを発火します。@before-enter、@enter、@after-enter、@enter-cancelledに加えて、それぞれに対応するleaveフックがあります。

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

before-enterで初期状態を設定する

@before-enterはDOM要素を受け取り、挿入前に実行されます。enter-fromクラスを使う場合と同じように、開始時のスタイルを設定するために使用します。

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

enterはelとdoneを受け取る

@enterは2つの引数、要素とdoneコールバックを受け取ります。要素をアニメーションさせ、完了したらdone()を呼び出して、トランジションが終了したことをVueに知らせます。

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

必ずdoneを呼び出す

done()を呼び忘れると、Vueは永久に待ち続け、トランジションが完了しません。その結果、after-enterが発火せず、要素がアニメーション途中の状態で残ることもあります。JS駆動のフックでは、必ず呼び出してください。

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

doneを使うleave

@leaveフックも同じように動作します。要素を外側へアニメーションさせ、最後にdone()を呼び出して、VueにDOMから削除させます。

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

after-enterで後処理を行う

@after-enterは、enterが完了すると実行されます。インラインスタイルの削除、トランジションプロパティのリセット、後続処理の実行などに使用します。

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

:css="false"でCSSを無効にする

JavaScriptだけでアニメーションさせる場合は、:css="false"を設定します。これにより、VueはCSSクラスの検出を完全にスキップし、タイミングをdoneコールバックだけに依存するようになります。また、意図しないCSSの干渉も防げます。

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

GSAPとの連携

JSフックはアニメーションライブラリとの連携で特に力を発揮します。GSAPで要素をトゥイーンし、doneをonCompleteコールバックとして渡せます。

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

キャンセル用フック

トランジションが中断された場合（ユーザーがすばやく切り替えた場合など）、@enter-cancelledと@leave-cancelledが発火します。実行中のトゥイーンを停止し、状態が残らないようにするために使用します。

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

JSフックを選ぶタイミング

物理演算、要素ごとに異なる動的な値、ライブラリとの連携、正確な順序制御が必要な場合は、JSフックを使用してください。単純なフェードやスライドなら、CSSクラスのほうが簡潔でパフォーマンスにも優れています。

クイックチェック

JavaScriptフックと一緒に:css="false"を渡すのはなぜですか。

振り返り

JSトランジションフックについて学びました。@before-enter（初期状態を設定）、@enter/@leave（アニメーション後にdoneを呼び出す）、@after-enter（後処理）に加え、CSSクラスを迂回する:css="false"と、中断に対応するキャンセル用フックについても学びました。

よくある質問

「JavaScriptトランジションフック」レッスンは無料ですか？

はい。「JavaScriptトランジションフック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「JavaScriptトランジションフック」で何を学びますか？

@before-enter、@enter、@after-enter、@leaveフック、複雑なアニメーションにGSAPを使う方法について学習します。ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「JavaScriptトランジションフック」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る