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コールバックを呼ぶ必要があります。

このトランジションは、例えばユーザがドラッグを開始した場合など、別の理由により中断を求められる場合があります。このとき呼び出されるのが、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