Transition

Transition is a special component that ought to be used only for handling a slide transition. You can create your custom Transition component to change default transition animations.

Built-in Transitions

There are 2 built-in Transition components:

Transition Component

Creating A Transition Component

Before creating a Transition component, you need to have knowledge about an extension component.

Because a Transition component is also a component, it can be created in a similar way:

export default ( Splide, Components ) => {
	return {
		/**
		 * Optional. Called when the component is mounted.
		 */
		mount() {
		},

		/**
		 * Required. Called just before the transition starts.
		 */
		start( destIndex, newIndex, prevIndex, coord, done ) {
		},
		
		/**
		 * Optional. Called when Splide is destroyed.
		 */
		destroy() {
		},
	};
}

The start() appearing in the example above is a mandatory method automatically called to start a transition by the Track component.

• {number} destIndex: Destination slide index. In “loop” mode, this index can be negative or greater than the number of slides for clones.
• {number} newIndex: New slide index.
• {number} prevIndex: Previous slide index.
• {Object} coord: An object containing x and y position. x will be 0 in the TTB mode and y will be 0 in LTR and RTL mode.
• {function} done: A callback function must be called after a transition is completed.

For example, source code of the Slide transition component is like this:

import { applyStyle } from '../../utils/dom';
import { SLIDE } from "../../constants/types";

export default ( Splide, Components ) => {
	let list;
	let endCallback;

	return {
		mount() {
			list = Components.Elements.list;

			Splide.on( 'transitionend', e => {
				if ( e.target === list && endCallback ) {
					endCallback();
				}
			}, list );
		},
		
		start( destIndex, newIndex, prevIndex, coord, done ) {
			const options   = Splide.options;
			const edgeIndex = Components.Controller.edgeIndex;
			let speed       = options.speed;
			endCallback = done;

			if ( Splide.is( SLIDE ) ) {
				if ( ( prevIndex === 0 && newIndex >= edgeIndex ) || ( prevIndex >= edgeIndex && newIndex === 0 ) ) {
					speed = options.rewindSpeed || speed;
				}
			}

			applyStyle( list, {
				transition: `transform ${ speed }ms ${ options.easing }`,
				transform : `translate(${ coord.x }px,${ coord.y }px)`,
			} );
		},
	};
}

A slide transition effect is made with CSS transition and transform properties. By observing the transitionend native event, notify that a transition is completed by triggering done callback.

Registration

Transition component is registered by mount() method of a Splide instance. While Extensions are passed to the first argument as an object, a Transition must be passed to the second argument as a function.

import Splide from '@splidejs/splide';
import Extension from '...';
import Transition from '...';

new Splide( '#splide' ).mount( { Extension }, Transition );