トランジション

export function MyTransition( Splide, Components ) {
  // 任意
  function mount() {
  }

  // 必須
  function start( index, done ) {
  }

  // 必須
  function cancel() {
  }

  // 任意
  function destroy() {
  }

  return {
    mount,
    start,
    cancel,
    destroy,
  }
}
JavaScript

import Splide from '@splidejs/splide';
import { MyTransition } from '...';

new Splide( '#splide' ).mount( {}, MyTransition );
JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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