SPIRALフォームのUXを劇的改善！入力・確認ページ間の遷移をCSSだけで滑らかにする方法

View Transition APIを使用してSPIRALのフォームでスムーズなページ遷移をする方法をご紹介します。

View Transition APIとは

View Transition APIはLPのような単一ページアプリケーションにおけるDOM状態変化やSPIRALのような複数ページアプリケーションにおける画面遷移時のアニメーションを実装することができるAPIです。
従来のページ内に記述するkeyframeアニメーションとは異なり遷移前と遷移後の2つのDOMのスナップショットを撮りその間を滑らかにアニメーションさせるため、ページ間の視覚的な連続性を生み出すことが可能です。
以下にデモサイトを用意いたしましたので入力ページから確認ボタン押下→確認ページから戻る、という動作をしてアニメーションを確認してみてください。デモサイト

この動作はJavaScriptを記述することなくCSSのみで実現することが可能です。

注意点

View Transition APIはChromeやEdge、Safariといったモダンなブラウザではほぼサポートされているものの一部のブラウザやスマートフォン等ではサポートされておらず理想通りの挙動をしない可能性があります。
ご承知おきください。

基本の実装

デモサイトのようにページ遷移時に遷移元のページがなだらかに消えて遷移先のページが下から出てくるようなアニメーションをする場合、記述すべきCSSは数行で済みます。
今回は設定デザインに適用する方法をご紹介します。

手順1：設定デザインのダウンロード

SPIRALで設定が済んだ設定デザインをダウンロードしてください。
styleタグの一番上に当たる下記記述の上にCSSを追加していきます。

#SMP_STYLE .body {
	margin: 0;
	padding: 0;
	background: #F4F4F4;
	font-size: 13px;
	*font-size: small;
	*font: x-small;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

#SMP_STYLE .body_tbl {
	width: 900px;
	margin: 0 auto;
	padding-bottom: 30px;
	border: 1px solid #999999;
	background: #FFFFFF;
}

手順2：View Transition APIを使用するための記述

headタグ内に下記コードを記述してください。
このコードは同一オリジン内でのページ遷移が発生した際に自動的にView Transitionを開始するために必須の記述です。

<meta name="view-transition" content="same-origin">

また、以下のように手順１のコードの上に3行追加してください。
このコードも必須の記述です。

@view-transition {
  navigation:auto;
}
#SMP_STYLE .body {
	margin: 0;
	padding: 0;
	background: #F4F4F4;
	font-size: 13px;
	*font-size: small;
	*font: x-small;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

#SMP_STYLE .body_tbl {
	width: 900px;
	margin: 0 auto;
	padding-bottom: 30px;
	border: 1px solid #999999;
	background: #FFFFFF;
}

手順3：アニメーションの定義

以下のようにアットルールと擬似要素を定義してください。
擬似要素

::view-transition-old()

は遷移元のページのスクリーンショットであり、

::view-transition-old(root)

と宣言することでデフォルトでUAスタイルシートに指定されている

:root{view-transition-name:root;}

に対してアニメーションを指定することができます。
後述しますが他のセレクタやクラスに対してアニメーションを指定したい場合は自身でview-transition-nameプロパティを指定する必要があります。

@view-transition {
  navigation:auto;
}

@keyframes scroll-out-up {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-50%);
    opacity: 0;
    transform: scale(0.98);
  }
}

@keyframes scroll-in-from-bottom {
  from {
    transform: translateY(30%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

::view-transition-old(root) {
  z-index: 10;
  animation: scroll-out-up 500ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

::view-transition-new(root) {
  animation: scroll-in-from-bottom 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 50ms;
}

#SMP_STYLE .body {
	margin: 0;
	padding: 0;
	background: #F4F4F4;
	font-size: 13px;
	*font-size: small;
	*font: x-small;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

これにてデモサイトの動作は完成です。ご自身のSPIRAL環境に貼り付けてページ遷移を試してみてください。

アニメーションを変更する

フォーム上のページ遷移で使えそうなアニメーションを２つご紹介します。

1：ズームイン／アウト

古いページが奥に吸い込まれるように小さくなりながら消え、新しいページが手前に迫ってくるように現れることで、奥行きのあるトランジションを表現します。
アットルールと擬似要素の記述を以下に変更してみてください。

/* --- 1：ズームイン／アウト --- */

/* 古いページがスケールダウンしながらフェードアウトする */
@keyframes scale-out {
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

/* 新しいページがスケールアップしながらフェードインする */
@keyframes scale-in {
  from {
    transform: scale(1.1);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ページ全体にアニメーションを適用 */
::view-transition-old(root) {
  animation: scale-out 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: scale-in 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

2：3Dカードフリップ

ページがカードのように、Y軸を中心に回転して裏返るような立体的なアニメーションです。
アットルールと擬似要素の記述を以下に変更してみてください。

/* --- 2：3Dカードフリップ --- */

/*
  3D回転を有効にするため、コンテナに perspective を設定します。
  ::view-transition は遷移中の要素を重ねるためのコンテナです。
*/
::view-transition {
  perspective: 1200px;
}

/* 古いページが奥側へ90度回転する */
@keyframes flip-out {
  from {
    transform: rotateY(0deg);
    opacity: 1;
  }
  to {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}

/* 新しいページが手前側へ90度回転しながら現れる */
@keyframes flip-in {
  from {
    transform: rotateY(90deg);
    opacity: 0;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* ページ全体にアニメーションを適用 */
/* backface-visibility は回転中に裏面が見えないようにするためのおまじないです */
::view-transition-old(root) {
  animation: flip-out 1000ms ease-in both;
  backface-visibility: hidden;
}

::view-transition-new(root) {
  animation: flip-in 1000ms ease-out both;
  backface-visibility: hidden;
}

発展編：特定のDOMを遷移させる

以上解説したようにView Transition APIはページ遷移時の滑らかなアニメーションを実現できますが、
真価はページ間で異なるDOM要素に対してアニメーションを加えることができる点です。
以下のデモサイトをご覧ください。デモサイト

入力ページの「確認」ボタンを押下するとそのボタンが画面遷移に伴って確認ページの最上部に移動するようなアニメーションです。入力ページの

#SMP_STYLE input.submit

から確認ページの

#SMP_STYLE h1

という異なるDOM要素へのアニメーションをCSSのみで行なっています。
前述のページ単位のアニメーションよりも視線が直接的に誘導されるため文脈がシームレスに維持され、フォームを触るユーザーにとって認知負荷の軽減に繋がります。

手順1：アニメーションしたい要素にview-transition-nameを記述する。

今回は入力ページの確認（※デフォルトの設定では送信）ボタンから確認ページの見出しに遷移させます。
入力ページは以下のように該当のCSSを変更してください。

#SMP_STYLE input.submit {
	width: 270px;
	height: 42px;
	margin: 40px 0 40px 0;
	border: hidden;
	border-radius: 3px 3px 3px 3px;
	/* other browser */
	background: #303030;
	/* for old webkit */
	background: -webkit-gradient(
		linear, left top, left bottom,
		color-stop(0.00, #606060),
		color-stop(1.00, #303030)
	);
	/* for modern browser */
	background: linear-gradient(
		to bottom,
		#606060 0%,
		#303030 100%
	);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
	color: #FFFFFF;
	font-size: 153.9%;
	font-weight: normal;
	text-align: center;
	cursor: pointer;
  view-transition-name: button-transition; /* この１行を追加 */
}

確認ページは以下のように変更してください。

#SMP_STYLE h1 {
	margin: 0;
	padding: 10px 10px 10px 10px;
	background: #333333;
	color: #FFFFFF;
	font-size: 153.9%;
	font-weight:bold;
	text-align:center;
	view-transition-name: button-transition; /* この１行を追加 */
}

手順2：アニメーションの定義

基本の実装の手順3と同様にアットルールと擬似要素の指定をしてください。
この記述は入力ページへの記述のみで動作することを確認していますが、カスタムモジュールに記載してどちらのページでも読み込むことをオススメします。

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

::view-transition-old(button-transition),
::view-transition-new(button-transition) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(button-transition) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}

::view-transition-new(button-transition) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
}

これにて発展編の実装も完了です。ご自身のSPIRAL環境に貼り付けてページ遷移をためしてみてください。

今回はフォーム上の入力ページと確認ページへ実装を行いましたが、マイエリアに実装することでモダンでユーザビリティの高い会員ページを作成することも可能です。

設定
認定

開発情報・ナレッジ