negl機能一覧 / Exports / Transition

Class: Transition

SPAモードでのページ遷移制御を行います。

このクラスはnegl内部でインスタンス化され、transitionオブジェクトとして提供されます。

取得方法

import { transition } from "negl";
// or
window.negl.transition

[注意] SPAモードでのページ遷移制御は hook にコールバック関数を登録することで実装できます。その為、このオブジェクト自体を使用する機会は極めて稀です。

Table of contents

Methods

• addExcludePath
• changeType
• go

Methods

addExcludePath

▸ addExcludePath(...pathes): void

Parameters

Returns

void

changeType

▸ changeType(callback): void

戻り値で返却されたトランジションタイプでページ遷移が行われます。 JSで動的にトランジションタイプを決定したい場合に使用してください。

注意 この処理は T_BEGIN の実行前に実行されます。その為、この時点では次のページの情報は基本的に取得できません。もし、次のページの種類によってトランジションタイプを変えたい場合は次のページの url などから判定してください。

transition.changeType((transitionType, state) => {
  const { current, next, triggerType } = state;
  // 現在ページのページタイプ（data-pageの値）が `home` の時
  if (current.pageType === "home") {
    return "transition-type-1";
  }
  // 次のページのURLに detail が含まれていない場合
  if (next.url.indexOf("detail") !== -1) {
    return "transition-type-2"
  }
  // ブラウザバックの時
  if (triggerType === "popstate") {
    return "transition-type-3";
  }
  // それ以外の時、トランジションタイプを変更しない。
  return transitionType;
});

Parameters

Returns

void

go

▸ go(href, target?, type?): void

href として渡されたページに遷移します。

Parameters

Returns

void