vuejs transitionを使ってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

transitionを使ってみよう

Vue.js|2019年02月08日

2019年02月08日
  • このエントリーをはてなブックマークに追加

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を使う以外に、自分でアニメーションを作ることも出来ます。

今回はご説明は割愛させて頂きますが、ぜひ試してみてください。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら