LinuxとMacと俺と

　webサービスでのページ遷移をスムーズにできるbarba.jsを使って画面遷移をするときに手間取ったのでやり方を書いていきます。 　私が作ったページは こちら 　「はじめる」ボタンを押せばページ遷移が始まります。 barba.js 　barba.jsはwebページ間の遷移をネイティブのアプリケーションのように遷移するためのライブラリです。 　Github :  https://github.com/luruke/barba.js 　導入にはnpmやcdnを使います。ここにはcdn用のコードを貼っておきます。 <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js" type="text/javascript"></script> 使い方 ページ遷移の際に読み込みたい部分を、 <div id="barba-wrapper"> <div class="barba-container"> </div> </div> 　で囲みます。その後、 Barba.Pjax.start(); 　とJavaScriptにかけばbarba.jsは最小限これで動きます。 設定 　まずは公式のデモのコードを見てみます。このコードを使うと上のbarba-wrapperで囲んだ範囲がフェードアウトして遷移先のbarba-wrapperで囲まれた部分がフェードインします。 var FadeTransition = Barba.BaseTransition.extend({ start: function() { /** * This function is automatically called as soon the Transition starts * this.newContainerLoading is a Promise for the loading of the new container * (Barba