transition-native-debug.js revision 448834d88f7c2818b5a70125bba193051806ccf9
9c94a3bab3da130a453194d151f33f11cd53f44eMatt Sweeney* The Native Transition Utility provides an API wrapper for CSS transitions.
4527b08ced97d1bf5f88cf786302fd66eb80a35bMatt Sweeney* It is also the base module for the timer-based transition module.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney* @module node
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney* Provides the base Transition class.
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney* @module node
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney* @submodule transition-native
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * A class for constructing transition instances.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @class Transition
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney * @for Transition
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney * @constructor
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @extends Base
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney TRANSITION_PROPERTY = '-webkit-transition-property',
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney TRANSITION_DURATION = '-webkit-transition-duration',
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney TRANSITION_TIMING_FUNCTION = '-webkit-transition-timing-function',
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTransition._reKeywords = /^(?:node|duration|iterations|easing|delay)$/;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeneyif (TRANSITION in Y.config.doc.documentElement.style) {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney config.duration: this.constructor.DEFAULT_DURATION;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney this._easing = config.easing || this.constructor.DEFAULT_EASING;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney this._count = 0; // track number of animated properties
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney this._running = false;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney return this;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (config.transform && !config['-webkit-transform']) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney config['-webkit-transform'] = config.transform;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney attrs[attr].transition._count--; // remapping attr to this transition
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney duration = (typeof transition.duration !== 'undefined') ? transition.duration :
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney delay = (typeof transition.delay !== 'undefined') ? transition.delay :
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._count++; // track number of bound properties
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney * Starts or an animation.
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney * @method run
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney * @chainable
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney _start: function() {
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney // preserve existing transitions
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration += computed[TRANSITION_DURATION] + ',';
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney easing += computed[TRANSITION_TIMING_FUNCTION] + ',';
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // run transitions mapped to this instance
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney if (attrs.hasOwnProperty(name) && attr.transition === anim) {
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney duration += anim._prepDur(attr.duration) + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney transitionText = transitionText.replace(/,$/, ';');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney // only one native end event per node
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney style.cssText += transitionText + duration + easing + delay + cssText;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _onNativeEnd: function(e) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney destroy: function() {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt SweeneyY.TransitionNative = Transition; // TODO: remove
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney Animate one or more css properties to a given value.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney <pre>example usage:
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney Y.one('#demo').transition({
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney duration: 1, // seconds
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing: 'ease-out',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney height: '10px',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney width: '10px',
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney opacity: { // per property duration and/or easing
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney duration: 2,
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing: 'ease-in'
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney @method transition
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney @param {Object} An object containing one or more style properties, a duration and an easing.
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.Node.prototype.transition = function(config, callback) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney return this;