@wearejust/transition NPM

Transition

Easily add transitions between pages. Either use the built in types like fade or slide, or add your own custom transition.

Installation

npm install @wearejust/transition --save

Usage

var Transition = require('@wearejust/transition');

Options

Transition will initialize automatically, but if you want to change any of it's options, use the init method.

Transition.init({
    defaultTarget: '#container'
});

Key	Values	Default	Description
defaultTarget	string, null	null	Default target. Null uses the body
defaultType	string	fade	Default transition type
error	string, function	reload	Error callback. Use 'reload' to reload the page or call your own function
exclude	string, null	null	Items to exclude from parsing. Can also use 'no-transition' class
lazyLoad	string, null	source,iframe	Removes sources in loaded data and restores after the transition
parseOnInit	boolean	true	Parse document for items on init

Targets

Changes the contents of the target, instead of the whole body.

 <a data-transition-target="yourtarget"></a>
 <div data-transition-id="yourtarget"></div>

Transition types

There are several transition types built in. The default fade can be changed in the options.

Name	Description
fade	Fade out old, fade in new
slide	Same as `slide-left`
slide-left	Place new content on the right and slide to the left
slide-right	Place new content on the left and slide to the right

Every item can have it's own transition type with a data atribute.

<a href="" data-transition-type="fade">Fade</a>
<a href="" data-transition-type="slide">Slide</a>

Adding custom type 'yourtype':

<a href="" data-transition-type="yourtype"></a>

Transition.types.yourtype = {
    replace: true,                          // Replaces the content after load. Set to false to use previous content in transition, like when sliding
    scrollToTop: true,                      // Scrolls to the top after placing the content
    before: function(target, callback) {    // Before starting
        callback();                         // Call once done to continue to start
    },
    start: function(target, callback) {     // Before loading
        callback();                         // Call once done to continue to load
    },
    place: function(target, content) {     // Custom placing of the content, default is null
        
    },
    end: function(target, callback) {       // After loading
        callback();                         // Call once done to continue to after
    },
    after: function(target, callback) {     // After end
        callback();                         // Call once done to complete
    }
};

Events

Events are triggered on every step during the transition. Use the on method to trigger an event handler.

Transition.on('ready', function() {
    // Do something after initializing or loading a new page
});

Available events, in order in which they are triggered.

Name	Parameters	Description
unavailable		History API is not available, transitions disabled
available		History API is available, transitions enabled
ready		Ready, after initializing
change	url	Location has changed (using popState)
before		Before the `start` transition
start		Start transition
load		Load page
loaded	data	Page is loaded
placed	content	Content of the loaded page is placed in the DOM
end		End transition
after		After the `end` transition
parse	items	After parsing new content for items
complete		Completed transition

Keyboard events

Binds keys to items. If a bound key is pressed, that item will be triggered.

 <a data-transition-key="27">Close</a>
 <a data-transition-key="37">Previous</a>
 <a data-transition-key="39">Next</a>

Properties

Transition

Name	Type	Description
available	boolean	History API availability
changing	boolean	Set to true before animating, to false when done
currentItem	object	The current clicked item
currentType	object	The current transition type
from	string	Previous location.href
location	string	Current location.href
items	array	List of all items on the page
options	object	Options of Transition
types	object	Collection of all transition types

Transition.currentItem

Name	Type	Description
bodyClass	string	Class attribute of the loaded body
element	jQuery object	DOM element
from	string	Previous location.href
target	jQuery object	Target container
targetIsBody	boolean	If target container is the body
type	string	Transition type
url	string	DOM element href