/*! * transition-to-from-auto 0.5.2 * https://github.com/75lb/transition-to-from-auto * Copyright 2015 Lloyd Brookes <75pound@gmail.com> */ /** @module @alias transition */ (function(window, document) { 'use strict'; var getComputedStyle = window.getComputedStyle; var isTransition = 'data-ttfaInTransition'; var elements = []; var data = []; // Transition detecting var transitionProp = false; var transitionEnd = false; var testStyle = document.createElement('a').style; var testProp; if (testStyle[(testProp = 'webkitTransition')] !== undefined) { transitionProp = testProp; transitionEnd = testProp + 'End'; } if (testStyle[(testProp = 'transition')] !== undefined) { transitionProp = testProp; transitionEnd = testProp + 'end'; } function process(options, data) { var el = options.element; var val = options.val; var prop = options.prop; var style = el.style; var startVal; var autoVal; if (!transitionProp) { return (style[prop] = val); } if (el.hasAttribute(isTransition)) { el.removeEventListener(transitionEnd, data.l); } else { style[transitionProp] = 'none'; startVal = getComputedStyle(el)[prop]; style[prop] = 'auto'; autoVal = getComputedStyle(el)[prop]; // Interrupt if (startVal === val || (val === 'auto' && startVal === autoVal)) { return; } data.auto = autoVal; el.setAttribute(isTransition, 1); // Transition style[prop] = startVal; el.offsetWidth; style[transitionProp] = options.style; } style[prop] = val === 'auto' ? data.auto : val; data.l = function(e) { if (e.propertyName === prop) { el.removeAttribute(isTransition); el.removeEventListener(transitionEnd, data.l); if (val === 'auto') { /* avoid transition flashes in Safari */ style[transitionProp] = 'none'; style[prop] = val; } } }; el.addEventListener(transitionEnd, data.l); } /** @param options {Object} @param options.element {string | element} - The DOM element or selector to transition @param options.val {string} - The value you want to transition to @param [options.prop] {string} - The CSS property to transition, defaults to `"height"` @param [options.style] {string} - The desired value for the `transition` CSS property (e.g. `"height 1s"`). If specified, this value is added inline and will override your CSS. Leave this value blank if you already have it defined in your stylesheet. @alias module:transition-to-from-auto */ function transition(options) { var element = options.element; var datum; var index; if (typeof element === 'string') { element = document.querySelector(element); } element = options.element = element instanceof Node ? element : false; options.prop = options.prop || 'height'; options.style = options.style || ''; if (element) { index = elements.indexOf(element); if (~index) { datum = data[index]; } else { datum = {}; elements.push(element); data.push(datum); } process(options, datum); } } /** The name of the vendor-specific transition CSS property @type {string} @example el.style[transition.prop + 'Duration'] = '1s'; */ transition.prop = transitionProp; /** * The name of the [transition end event](https://developer.mozilla.org/en-US/docs/Web/Events/transitionend) in the current browser (typically `"transitionend"` or `"webkitTransitionEnd"`) * @type {string} * @example * el.addEventListener(transition.end, function(){ * // the transition ended.. * }); */ transition.end = transitionEnd; if (typeof module === 'object' && module.exports) { module.exports = transition; } else if (typeof define === 'function' && define.amd) { define(function() { return transition; }); } else { window.transition = transition; } })(window, document);