はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
今回はtransitionコンポーネントを用いてアニメーション（簡単なフェードイン、フェードアウト）を作ってみようと思います。
transitionコンポーネント
Vue.jsでアニメーションを実装する際は組み込みコンポーネントであるtransitionコンポーネント、もしくはtransition-groupコンポーネントを用いて実装します。
基本的な使い方
基本的な使い方としては以下のようにアニメーションさせたい部分をtranasitionコンポーネントで囲み、name属性へ任意の値を入れます。
exampleTemplate.vue
<template>
<transition name="任意の値">
<div></div>
</transition>
</template>
その後、上記で付けた「任意の値」を用いて以下のクラスを作成します。
- [任意の値]-enter-from
- [任意の値]-enter-active
- [任意の値]-enter-to
- [任意の値]-leave-from
- [任意の値]-enter-active
- [任意の値]-enter-to
以下は「任意の値」をfadeとしたときの例です。
exampleStyle.vue
<style scoped>
.fade-enter-from {
/* 処理 */
}
.fade-enter-active {
/* 処理 */
}
.fade-enter-to {
/* 処理 */
}
.fade-leave-from {
/* 処理 */
}
.fade-leave-active {
/* 処理 */
}
.fade-leave-to {
/* 処理 */
}
</style>
これらのクラスをトランジションクラスと言い、それぞれの意味や発火時については以下のドキュメントが参考になります。
以上を用いてサンプルを作ってみる
以上を用いて、サンプルコードを書いてみます。
内容としてはおはようボタンというボタンをクリックするとGood Morning!という文字がフェードインしてくるものとします。
サンプルコード
Morning.vue
<template>
<button @click="show = !show">おはようボタン</button>
<transition name="fade">
<div v-if="show">{{ greetMessage }}</div>
</transition>
</template>
<script>
export default {
data() {
return {
greetMessage: "Good Morning!",
show: true,
};
},
};
</script>
<style scoped>
.fade-enter-from {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.5s;
}
.fade-enter-to {
opacity: 1;
}
.fade-leave-from {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-leave-to {
opacity: 0;
}
</style>
App.vue
<template>
<morning></morning>
</template>
<script>
import Morning from "./components/Morning.vue";
export default {
components: {
Morning
},
};
</script>
結果
以下のように挨拶文がフェードイン・フェードアウトしていることが分かります。
おわりに
今回はtransitionコンポーネントを用いたアニメーション作成の学習を行いました。
次回はAnimate.cssを用いて色々なアニメーションを実装してみたいと思います。