By U Zensen.

欲しいものはプログラミングで自分で作る。

Riot.jsのルーティングでふわっと画面を切り替える方法!!

2016 / 7 / 27
JavaScript
Riot.jsでふわっとルーティング

はじめに!!

ポケモンGO楽しいー!
こんにちは!ぴーすけです!

今回はRiot.jsのルーティング機能でSPA(シングルページアプリケーション)を作りたいと思います!

とおもったのですが、SPAの定番である画面をふわっと切り替える方法が見つからなかったので、無理やり実装してみました!

もしもっと良い方法があったら教えてください!

スポンサードリンク

まずはRiot.jsを使った基本的なルーティング機能!!

多分一番簡単なルーティン機能はこんな感じだと思います。上に固定メニューを用意したので、そのリンクを押すと画面が一部切り替わります。

ソースを見るには「html」タブを押してください。

See the Pen YWOarP by p-suke (@p-suke) on CodePen.

さらに以下のように複数箇所マウントする位置を用意することも簡単です。

See the Pen dXqZby by p-suke (@p-suke) on CodePen.

本題!!ふわっとルーティング!!

ソースにコメントで説明を振ってあるので見てみてください!

See the Pen LkJmEP by p-suke (@p-suke) on CodePen.

軽く説明すると、ルーティングで表示される一番外側の要素に「opacity: 0;」の効いたクラスを設定しておきます。そして、ルーティング直前のイベントとルーティング直後のイベントでそのクラスを削除します。

その削除の際に「transition: 0.5s;」を効かせているので、ふわっと切り替わるようになっています。

以上!!

どうでしょうか?少し無理やりかもしれませんが思った通りに動かせたので良しとします。

Riot.jsの日本語ドキュメントも充実してきましたし、是非Riot.jsに挑戦してみてください!

Pocket

コメント

コメントを残す