Transition

トランジション

トランジションコンポーネント

トランジションコンポーネントは、スライドを切り替えるトランジションエフェクトを実装するための特別なコンポーネントです。Splideにはデフォルトで「フェード」と「スライド」の2つのトランジションコンポーネントを備えています。

トランジションコンポーネントの作成

このドキュメントは、エクステンションの知識があることを前提としています。

トランジションコンポーネントは、start()cancel()メソッドが必須であること以外はすべて、エクステンションと同じ方法で作成できます。

export function MyTransition( Splide, Components ) {
// 任意
function mount() {
}
// 必須
function start( index, done ) {
}
// 必須
function cancel() {
}
// 任意
function destroy() {
}
return {
mount,
start,
cancel,
destroy,
}
}
JavaScript

Moveコアコンポーネントは、スライダーを動かす直前にこのstart()メソッドを呼び出します。トランジションコンポーネントは実際にスライダーを目的の位置まで移動させ、遷移が終わった時点でdoneコールバックを呼ぶ必要があります。

indexnumber

目的地となるスライドのインデックス

done() => void

トランジションが終わった際に呼ぶコールバック関数

このトランジションは、例えばユーザがドラッグを開始した場合など、別の理由により中断を求められる場合があります。このとき呼び出されるのが、cancel()メソッドです。

登録

トランジションコンポーネントは、Splide#mount()の第二引数から登録できます。

import Splide from '@splidejs/splide';
import { MyTransition } from '...';
new Splide( '#splide' ).mount( {}, MyTransition );
JavaScript

サンプル

以下は、CSSトランジションを用いたシンプルなトランジションコンポーネントの作成例です。

import { EventInterface } from '@splidejs/splide';
export function MyTransition( Splide, Components ) {
const { bind } = EventInterface( Splide );
const { Move } = Components;
const { list } = Components.Elements;
let endCallback;
function mount() {
bind( list, 'transitionend', e => {
if ( e.target === list && endCallback ) {
// transitionプロパティを削除
cancel();
// `done`を呼び出して終了を知らせる
endCallback();
}
} );
}
function start( index, done ) {
// インデックスをポジションに変換
const destination = Move.toPosition( index, true );
// リスト要素に対してトランジションプロパティを設定
list.style.transition = 'transform 800ms cubic-bezier(.44,.65,.07,1.01)';
// 目的地をセットし、CSSトランジションを作動させる
Move.translate( destination );
// コールバックを退避
endCallback = done;
}
function cancel() {
list.style.transition = '';
}
return {
mount,
start,
cancel,
}
}
JavaScript

結果、次のようなスライダーが得られます。

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09