【VueによるSPA構築】ページ遷移アニメを実装する方法

課題を持った人

Vue CLIで構築したシングルページアプリケーションの雛形に、ページが変わる時にフェードイン/フェードアウトするようなトランジションアニメーションをつけたいんだけど、どうやってやればいいんだろう？ついでに、色々なトランジションアニメーションの実装方法を知りたいな。

こういった要望に答えます。

筆者は、最近、仕事でVue.jsを使ってシングルページアプリケーションを構築したので、信頼していただける記事かなと思います。

この記事はVue CLIを使った開発環境構築方法で作ったVueアプリケーションの雛形を元に解説していますので、まずは雛形を作成してから読み進めていただくと分かりやすいと思います。

App.vueを編集する

早速、トランジションアニメーションを実装していきましょう。

画面確認用にローカルサーバを立ち上げておきましょう。

まずは、App.vueを編集します。

Vue CLIで作成したディレクトリにあるApp.vueを開いて、route-view要素をtransition要素で囲みます。シングルページアプリケーションではroute-view要素の中にページ情報が読み込まれます。

transition要素を追加したら保存します。この段階では、ブラウザで確認してもトランジションアニメーションは発生しません。

CSSを編集する

次に、App.vueのstyleタグ内にトランジションアニメーションの動作の設定を追加していきます。cssに設定を追加することでページ遷移時にアニメーションさせることができます。

ブラウザ上で動作を確認してみましょう。ページ遷移時にアニメーションを確認できると思います。

しかし、まだ、フェードアウトが終わる前に、フェードインの画像が表示されてしまっているところに違和感がありますので、これを解決していきましょう。

App.vueのtemplate要素内に先ほど追加した、transition要素にmode属性を追加します。mode属性の値は「out-in」です。

これでよりスムーズなアニメーションになります。まとめると、ページ遷移時にトランジションアニメーションをつ追加する方法は以下の手順になります。

様々なトランジションアニメーションの紹介

トランジションアニメーションをいくつかご紹介します。ここで紹介するものをアプリケーションに合わせてアレンジしてみるといいと思います。css設定を以下に紹介するものに書き換えることでアニメーションが変化します。

画面右へフェードアウトして、画面左からフェードインするアニメーション

画面上へフェードアウトして、画面下からフェードインするアニメーション

画面左にフェードアウトして、画面左からフェードインするアニメーション

以上、ページ遷移時にアニメーションをつける方法をご紹介しました。

筆者

アニメーションを効果的に使うことでWebサイトの閲覧体験は向上すると思います。この記事を参考にいろいろと試してもらえると嬉しいです。