triggering transitions

get-style-property.js

/*!
 * getStyleProperty v1.0.4
 * original by kangax
 * http://perfectionkills.com/feature-testing-css-properties/
 * MIT license
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false, exports: false, module: false */

( function( window ) {

'use strict';

var prefixes = 'Webkit Moz ms Ms O'.split(' ');
var docElemStyle = document.documentElement.style;

function getStyleProperty( propName ) {
  if ( !propName ) {
    return;
  }

  // test standard property first
  if ( typeof docElemStyle[ propName ] === 'string' ) {
    return propName;
  }

  // capitalize
  propName = propName.charAt(0).toUpperCase() + propName.slice(1);

  // test vendor specific properties
  var prefixed;
  for ( var i=0, len = prefixes.length; i < len; i++ ) {
    prefixed = prefixes[i] + propName;
    if ( typeof docElemStyle[ prefixed ] === 'string' ) {
      return prefixed;
    }
  }
}

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( function() {
    return getStyleProperty;
  });
} else if ( typeof exports === 'object' ) {
  // CommonJS for Component
  module.exports = getStyleProperty;
} else {
  // browser global
  window.getStyleProperty = getStyleProperty;
}

})( window );

trigger-transition.js

/*!
 * triggerTransition
 * CSS Transition helper. Use it like:
 * triggerTransition(elem, { width: 100px}, '0.8s' )
 */

//= require libs/get-style-property.js

/* globals getStyleProperty */

(function() {

var transPropertyProp = getStyleProperty('transitionProperty');
var transDurationProp = getStyleProperty('transitionDuration');

var transEndEvent = {
  WebkitTransitionProperty: 'webkitTransitionEnd',
  MozTransitionProperty: 'transitionend',
  OTransitionProperty: 'otransitionend',
  transitionProperty: 'transitionend'
}[ transPropertyProp ];

// -----  ----- //

var proxyElem = document.createElement('div');

/**
 * @param {Element} elem - the element to transition
 * @param {Object} style - CSS style object
 * @param {String} duration - duration of transition. '0.6s'. Optional. Defaults to '0.4s'
 * @returns {Undefined} undefined
 */
function triggerTransition(elem, style, duration, callback) {
  /* eslint no-unused-vars: 0 */ // for reflow trigger
  var isSame = false;
  // check if transition style is already set
  for (var prop in style) {
    proxyElem.style[prop] = style[prop];
    isSame = elem.style[ prop ] == proxyElem.style[ prop ];
    if (!isSame) {
      break;
    }
  }
  // bail if transition not needed
  if (isSame) {
    return;
  }

  // enable transition
  // create transition property "width,opacity,transform"
  var props = [];
  for (prop in style) {
    props.push(prop);
  }
  elem.style[ transPropertyProp ] = props.join('');
  elem.style[ transDurationProp ] = duration || '0.4s';
  elem.addEventListener( transEndEvent, function(event) {
    onTransitionend(event, callback);
  }, false );
  // trigger reflow
  var h = elem.offsetHeight;
  // set transition style
  for ( prop in style ) {
    elem.style[ prop ] = style[ prop ];
  }
}

function onTransitionend( event, callback ) {
  // reset transition styles
  event.target.style[ transPropertyProp ] = null;
  event.target.style[ transDurationProp ] = null;
  event.target.removeEventListener( transEndEvent, onTransitionend, false );
  if (callback) callback();
}

window.triggerTransition = triggerTransition;

}());