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.
In this tutorial, all examples are written in ECMAScript 6(ES6). You need to transpile them for browsers.
Built-in Transitions
There are 2 built-in Transition components:
Fade | Activated when the type option is 'fade' . Slides are changed with a fade transition. |
---|---|
Slide | Activated when the type option is not 'fade' . Slides are changed with a typical slide transition. |
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.
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 );