Nuxt.js は <transition> コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションを行うことができます。
String
または Object
または Function
特定のルートに対してカスタムトランジションを設定するには、ページコンポーネントに transition
キーを追加してください。
export default {
// 文字列を指定できます
transition: ''
// またはオブジェクト
transition: {}
// または関数
transition (to, from) {}
}
transition
キーに文字列がセットされたときは transition.name
として用いられます。
export default {
transition: 'test'
}
上のように設定されると、コンポーネントは次のようにセットされます:
<transition name="test">
transition
キーにオブジェクトがセットされたとき:
export default {
transition: {
name: 'test',
mode: 'out-in'
}
}
上のように設定されると、コンポーネントは次のようにセットされます:
<transition name="test" mode="out-in">
transition
オブジェクトが持つことができるプロパティは以下のとおり:
キー | 型 | デフォルト | 定義 |
---|---|---|---|
name |
String |
"page" |
すべてのトランジション時に適用されるトランジション名 |
mode |
String |
"out-in" |
すべてのトランジション時に適用されるトランジションモード。詳細は Vue.js のドキュメント 参照 |
css |
Boolean |
true |
CSS トランジションクラスを適用するか否か。デフォルトは true です。false を設定すると、コンポーネントのイベントで登録された JavaScript フックのみがトリガーになります |
duration |
Integer |
n/a |
トランジションが適用される時間(ミリ秒)です。詳細は Vue.js のドキュメント 参照 |
type |
String |
n/a |
トランジション終了のタイミングを判定するために待ち受けるトランジションのイベントタイプを指定します。"transition" または "animation" を指定できます。デフォルトでは、より時間がかかるほうのタイプが自動的に選ばれます |
enterClass |
String |
n/a |
トランジション開始時の状態のクラスです。詳細は Vue.js のドキュメント 参照 |
enterToClass |
String |
n/a |
トランジション終了時の状態のクラスです。詳細は Vue.js のドキュメント 参照 |
enterActiveClass |
String |
n/a |
トランジション中に適用されるクラスです。詳細は Vue.js のドキュメント 参照 |
leaveClass |
String |
n/a |
トランジション開始時の状態のクラスです。詳細は Vue.js のドキュメント 参照 |
leaveToClass |
String |
n/a |
トランジション終了時の状態のクラスです。詳細は Vue.js のドキュメント 参照 |
leaveActiveClass |
String |
n/a |
トランジション中に適用されるクラスです。詳細は Vue.js のドキュメント 参照 |
transition
の中でメソッドを定義することもでき、メソッドは JavaScript フック で使われます:
メモ: JavaScript のみのトランジションのために明示的に css: false
を追加しておくのは良いアイディアです。これは Vue は CSS 判定をスキップさせます。また誤って CSS ルールがトランジションに干渉するのを防ぎます。
transition
キーに関数がセットされたとき:
export default {
transition (to, from) {
if (!from) return 'slide-left'
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
}
}
トランジションは各ページ遷移時に次のように適用されます:
/
から /posts
へ遷移するとき => slide-left
/posts
から /posts?page=3
へ遷移するとき => slide-left
/posts?page=3
から /posts?page=2
へ遷移するとき => slide-right
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する