Skip to content
JS utility class for CSS transitions
JavaScript
Find file
Latest commit 9efefb9 Feb 8, 2014 @desandro reset .to and .from

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.

Something went wrong with that request. Please try again.