Vue.jsのtransitionコンポーネントを使用すると、要素の表示・非表示や状態の変化にアニメーションを簡単に追加できます。この記事では、transitionの基本的な使い方から、カスタムクラスを使ったアニメーション、JavaScriptフックを使った高度なアニメーションの実装方法までを紹介します。
基本的なtransitionの使い方
transitionコンポーネントを使うと、要素がDOMに追加されたり削除されたりする際に、簡単にアニメーションを適用できます。例えば、ボタンをクリックして要素の表示・非表示を切り替える際にフェードイン・フェードアウトの効果をつけることができます。
<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>このコードでは、showの値が変わると、要素がフェードインまたはフェードアウトします。
カスタムクラスを使ってアニメーションを強化する
transitionコンポーネントは、アニメーションの各ステップで適用されるクラスをカスタマイズすることができます。これにより、より洗練されたアニメーション効果を実現できます。
<template>
<div id="app">
<button @click="show = !show">Toggle</button>
<transition
enter-active-class="animated bounceIn"
leave-active-class="animated 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>この例では、animate.cssを使用して、要素が表示される際にbounceInアニメーションが適用され、非表示になる際にはbounceOutアニメーションが適用されます。
JavaScriptフックを使って高度なアニメーションを実装する
transitionコンポーネントは、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>このコードでは、要素が表示される前に不透明度を0に設定し、500ミリ秒後にフェードインするカスタムアニメーションを実装しています。同様に、要素が非表示になるときにフェードアウトするアニメーションも設定しています。
まとめ
Vue.jsのtransitionコンポーネントを活用すれば、エレガントなアニメーションを簡単に実装できます。基本的な使い方から、カスタムクラスやJavaScriptフックを使用した高度なアニメーションまで、アプリケーションに応じて最適なアニメーションを取り入れることで、ユーザーエクスペリエンスを向上させましょう。
