JS utility class for CSS transitions
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
README.md
bower.json
component.json
example.html
transitn.js

README.md

Transitn

JS utility class for CSS transitions

Used in Outlayer for Masonry, Isotope, and Packery

// create transition
var transition = new Transitn({
  element: document.querySelector('#elem'),
  duration: '0.5s',
  to: {
    opacity: 1,
    transform: 'scale(1)'
  }
});
// start transition
transition.start();

Install

Transitn has dependencies. Install with Bower to get them.

bower install desandro/transitn

Properties

var transition = new Transitn({  
  // {Element} element being transitioned, required
  element: document.querySelector('#elem'), 
  // {Object} style immediately set, optional
  from: {
    display: 'block',
    opacity: 0
  },
  // {Object} style transition to, required
  to: {
    // munges 'transform' to appropriate vendor-prefixed property
    transform: 'translate( 200, 100 )',
    opacity: 0.5
  },
  // {String} duration of transition, required
  duration: '0.4s',
  // {String} delay before transition starts, optional
  delay: '0.2s',
  // {String} timing function / easing, optional
  timingFunction: 'ease-in-out',
  // {Boolean} removes to transition styles when transition ends, optional
  isCleaning: true
});

Methods

// start transition
transition.start()

// bind event
transition.on( 'transitionend', function() {...} )

// bind event once
transition.once( 'transitionend', function() {...} )

// unbind event
transition.off( 'transitionend', function() {...} )

transitionend Event

transition.on( 'transitionend', function( _trnstn, property, event ) {
  console.log( 'transition on ' + property + ' ended' );
});
  • _trnstn Transitn - Transitn instance
  • property String - Standardized property name of ended transition
  • event Event - original transitionend event. Not available if transition was immediately executed (<IE10, and when duration == 0).

MIT license

Transitn is released under the MIT license.