transitionとは簡単に言うとアニメーションのことです。
Vueを使って何か要素を表示させたり移動させたりする時に動きを加えます。
Vue.jsには手軽にアニメーションさせることが出来るタグがあるんですね。
そのままなのですが<transition>というタグです。
基本的にはtransitionのタグにいくつか設定し、動かしたい要素を囲うだけでOKです。
アニメーションそのものはCSSで作れます。
しかし、CSSでアニメーションを作るとなると大変ですからね。
今回はanimate.cssというライブラリを併用してアニメーションさせます。
Vue.jsはこうしたライブラリと併用させやすい仕組みになっています。
では、さっそく今回のミッションに入っていきましょう。
今回のミッション
前回作ったファイルをそのまま使います。
コンテンツの切り替えにアニメーションをつけてみましょう。
再現するファイルは下記になります。
ソースコードの解説を参考に、上記を再現してみてください。
一通りソースコードを理解してから取り組むと良いでしょう。
新しい書き方も出てくるので、いきなりだと難しいです。
どうしても動かなければ、下記からファイルをダウンロードしてください。
細かい箇所のチェックはエラーなど、見つけてみましょう。
なお、毎回ご提供するこちらはあくまでも、参考ファイルです。
より良い書き方を見つけたら、ご自身で改良してみてください。
ソースコードの解説
まずは、下記ソースコードに目を通してみましょう。
全体の流れを把握したら、すぐに自分で実践してみてください。
今回はanimate.cssを使う必要があります。
まずはライブラリを読み込んでみましょう。
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
これで、animate.cssを読み込むことができました。
動かす基本環境はこれでOKなので、あとはtransitionを使っていきます。
<div id="app">
<button v-for="(tab,index) in tabs" v-bind:key="tab.id" class="compTabButton" v-bind:class="{ 'compTabButton-active': tab.id === currentTab }" v-on:click="currentTab = tab.id">
<span v-bind:class="tab.id">{{ tab.text }}</span>
</button>
<!--animate.cssと併用でトランジション(動き)も簡単に実装-->
<!--動かしたい箇所をtransitionタグで囲むだけ-->
<!--enter-active-classに「表示されるとき」の動きを設定。animatedのあとにanimate.cssの効果を入れる。-->
<!--leave-active-classに「消えるとき」の動きを設定。animatedのあとにanimate.cssの効果を入れる。-->
<!--mode="out-in"は表示される要素と消える要素をタイミングをずらして処理する指定(消してみると一目瞭然)-->
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" mode="out-in">
<component v-bind:is="currentTabComponent" class="app-tab"></component>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('tab-home', { template: '<div>ホームのコンポーネントです。</div>' })
Vue.component('tab-posts', { template: '<div>投稿のコンポーネントです。</div>' })
Vue.component('tab-archive', { template: '<div>一覧のコンポーネントです。</div>' })
new Vue({
el: '#app',
data: {
currentTab: 'home',
tabs: [
{id:'home',text:"ホーム"},
{id:'posts',text:"投稿"},
{id:'archive',text:"一覧"}
]
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab;
}
}
})
</script>
なんとなく、流れはお分かり頂けたでしょうか。
単純ですが、transitionに設定をして囲うだけですね。
前回の内容と比べると、今回は単純だったかもしれません。
ただ、transitionにも、まだまだたくさんの方法があります。
animate.cssを使う以外に、自分でアニメーションを作ることも出来ます。
今回はご説明は割愛させて頂きますが、ぜひ試してみてください。