Vue.jsのtransitionコンポーネントを使用すると、要素の表示・非表示や状態の変化にスムーズなアニメーションを簡単に追加できます。例えば、モーダルウィンドウ、トースト通知、アコーディオンなど、インタラクションを伴うUIに活用できます。本記事では、基本的な使い方からカスタムクラスやJavaScriptフックを用いた高度なアニメーションまで、具体例と共に解説します。
基本的なtransitionの使い方
以下は、ボタンをクリックすると要素がフェードイン・フェードアウトする基本的な例です。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">Hello, Vue.js!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
transitionタグを使うことで、DOMに要素が追加・削除されるタイミングでクラスが自動的に適用され、スムーズなアニメーションが実現します。クラスの仕組みは以下の通りです：
fade-enter: 表示前の初期状態fade-enter-active: 表示時のアニメーションfade-leave-active: 非表示時のアニメーションfade-leave-to: 非表示の終了状態
カスタムクラスを使ってアニメーションを強化する
アニメーションライブラリ（ここではanimate.css）を使用することで、transitionの表現を大きく広げることが可能です。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition
enter-active-class="animate__animated animate__bounceIn"
leave-active-class="animate__animated animate__bounceOut"
>
<p v-if="show">Hello, Vue.js!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
};
</script>
<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
</style>
enter-active-classとleave-active-classでそれぞれ異なるアニメーションを設定することで、見た目にも楽しいUIを実現できます。
JavaScriptフックを使って高度なアニメーションを実装する
CSSでは実現しにくい細かい制御をしたい場合は、JavaScriptのライフサイクルフックを使うことでカスタムアニメーションが可能です。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="show">Hello, Vue.js!</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
setTimeout(() => {
el.style.opacity = 1;
done();
}, 500);
},
leave(el, done) {
setTimeout(() => {
el.style.opacity = 0;
done();
}, 500);
}
}
};
</script>
done()はアニメーション完了をVueに通知するコールバックで、これを呼ばないとDOMの更新が停止することがあるため注意が必要です。
Vue.jsのアニメーション実装を成功させるポイントまとめ
transitionコンポーネントを活用することで、アプリケーションのユーザー体験は格段に向上します。以下のようなシーンに適しています：
- モーダルの開閉アニメーション
- 通知バナーの出現・消去
- FAQアコーディオンの開閉
- ページ遷移時のトランジション
CSSクラス・外部ライブラリ・JavaScriptフックを使い分けることで、表現力豊かなUIを構築できます。小さな改善が、大きなUX向上につながります。
