transition-native-debug.js revision f01d121976553130cab6089d35c71d5b947d1204
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* The Native Transition Utility provides an API wrapper for CSS transitions.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* It is also the base module for the timer-based transition module.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* @module transition
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* Provides the base Transition class. The "transition" method is added to Node,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* and is how Transition should be used.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* @module transition
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce* @submodule transition-native
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * A class for constructing transition instances.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * Adds the "transition" method to Node.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * @class Transition
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * @constructor
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce TRANSITION_PROPERTY = '-webkit-transition-property',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce TRANSITION_DURATION = '-webkit-transition-duration',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce TRANSITION_TIMING_FUNCTION = '-webkit-transition-timing-function',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceTransition = function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce property = property.replace(/-([a-z])/gi, function(m0, m1) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce property = property.replace(/([a-z])([A-Z]+)/g, function(m0, m1, m2) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceTransition._reKeywords = /^(?:node|duration|iterations|easing|delay)$/;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luceif (TRANSITION in Y.config.doc.documentElement.style) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce config.duration: anim.constructor.DEFAULT_DURATION;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce anim._easing = config.easing || anim.constructor.DEFAULT_EASING;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce anim._count = 0; // track number of animated properties
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce if (config.transform && !config['-webkit-transform']) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce attrs[attr].transition._count--; // remapping attr to this transition
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce duration = (typeof transition.duration !== 'undefined') ? transition.duration :
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce delay = (typeof transition.delay !== 'undefined') ? transition.delay :
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce anim._count++; // track number of bound properties
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * Starts or an animation.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * @method run
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce * @chainable
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce _start: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // preserve existing transitions
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce easing += computed[TRANSITION_TIMING_FUNCTION] + ',';
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // run transitions mapped to this instance
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce if (attrs.hasOwnProperty(name) && attr.transition === anim) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce if (name in domNode.style) { // only native styles allowed
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce transitionText = transitionText.replace(/,$/, ';');
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce // only one native end event per node
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce style.cssText += transitionText + duration + easing + delay + cssText;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce setTimeout(function() { // IE: allow previous update to finish
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce _endNative: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce _onNativeEnd: function(e) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce destroy: function() {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce this._node = null;
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Animate one or more css properties to a given value. Requires the "transition" module.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce <pre>example usage:
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce Y.one('#demo').transition({
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce duration: 1, // seconds
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce easing: 'ease-out',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce height: '10px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce width: '10px',
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce opacity: { // per property duration and/or easing
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce duration: 2,
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce easing: 'ease-in'
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce @method transition
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce @param {Object} An object containing one or more style properties, a duration and an easing.
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric LuceY.Node.prototype.transition = function(config, callback) {
f293a69bcd1c1dd7bdac8f4102fc2398b9e475c8Eric Luce return this;