transition-debug.js revision 2e49faa8717cc2acbd7ab2aac237061848568a6c
9c94a3bab3da130a453194d151f33f11cd53f44eMatt Sweeney* Provides the transition method for Node.
4527b08ced97d1bf5f88cf786302fd66eb80a35bMatt Sweeney* Transition has no API of its own, but adds the transition method to Node.
60dcf3ebba038d9ec57d617a7395a9bff15802fcMatt Sweeney* @module transition
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney* @requires node-style
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * A class for constructing transition instances.
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * Adds the "transition" method to Node.
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney * @class Transition
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney * @constructor
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney property = property.replace(/-([a-z])/gi, function(m0, m1) {
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney property = property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g, function(m0, m1, m2, m3) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.Array.each(VENDORS, function(val) { // then vendor specific
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (property in DOCUMENT[DOCUMENT_ELEMENT].style) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney VENDOR_PREFIX = Transition._toHyphen(val) + '-';
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTRANSITION_CAMEL = CAMEL_VENDOR_PREFIX + 'Transition';
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTRANSITION_PROPERTY_CAMEL = CAMEL_VENDOR_PREFIX + 'TransitionProperty';
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt SweeneyTRANSITION_PROPERTY = VENDOR_PREFIX + 'transition-property';
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt SweeneyTRANSITION_DURATION = VENDOR_PREFIX + 'transition-duration';
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTRANSITION_TIMING_FUNCTION = VENDOR_PREFIX + 'transition-timing-function';
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt SweeneyTRANSITION_DELAY = VENDOR_PREFIX + 'transition-delay';
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyON_TRANSITION_END = 'on' + CAMEL_VENDOR_PREFIX.toLowerCase() + 'transitionend';
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt SweeneyTRANSITION_END = VENDOR_TRANSITION_END[CAMEL_VENDOR_PREFIX] || TRANSITION_END;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt SweeneyTRANSFORM_CAMEL = CAMEL_VENDOR_PREFIX + 'Transform';
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney config.duration: anim.constructor.DEFAULT_DURATION;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney anim._easing = config.easing || anim.constructor.DEFAULT_EASING;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._count = 0; // track number of animated properties
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // might just be a value
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney // take control if another transition owns this property
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney attr.transition._count--; // remapping attr to this transition
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // make 0 async and fire events
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney dur = ((typeof config.duration != 'undefined') ? config.duration :
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney delay: (typeof config.delay != 'undefined') ? config.delay :
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // native end event doesnt fire when setting to same value
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // supplementing with timer
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // val may be a string or number (height: 0, etc), but computedStyle is always string
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney compareVal = (typeof val === 'string') ? computed : parseFloat(computed);
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney if (Transition.useNative && compareVal === val) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney attrs = Transition._nodeAttrs[Y.stamp(anim._node)];
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (config.transform && !config[TRANSFORM_CAMEL]) {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney // when size is auto or % webkit starts from zero instead of computed
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney // (https://bugs.webkit.org/show_bug.cgi?id=16020)
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney // TODO: selective set
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney Y.DOM.setStyle(node, attr, Y.DOM.getComputedStyle(node, attr));
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * Starts or an animation.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @method run
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @chainable
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney //anim._node.fire('transition:start', data);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _start: function() {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney cssTransition = computed[Transition._toCamel(TRANSITION_PROPERTY)],
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney // preserve existing transitions
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney duration += computed[Transition._toCamel(TRANSITION_DURATION)] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing += computed[Transition._toCamel(TRANSITION_TIMING_FUNCTION)] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney delay += computed[Transition._toCamel(TRANSITION_DELAY)] + ',';
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney // run transitions mapped to this instance
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney if (attrs.hasOwnProperty(name) && attr.transition === anim) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney if (name in node.style) { // only native styles allowed
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney duration += anim._prepDur(attr.duration) + ',';
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney transitionText = transitionText.replace(/,$/, ';');
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney // only one native end event per node
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney //anim._detach = Y.on(TRANSITION_END, anim._onNativeEnd, node);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney //node[ON_TRANSITION_END] = anim._onNativeEnd;
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney node.addEventListener(TRANSITION_END, anim._onNativeEnd, '');
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney //setTimeout(function() { // allow updates to apply (size fix, onstart, etc)
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney style.cssText += transitionText + duration + easing + delay + cssText;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney setTimeout(function() { // IE: allow previous update to finish
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // nested to ensure proper fire order
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney } else if (callback) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney setTimeout(function() { // IE: allow previous update to finish
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney //node.fire('transition:end', data);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney value = node.ownerDocument.defaultView.getComputedStyle(node, '')[Transition._toCamel(TRANSITION_PROPERTY)];
3f4cbe6edb218980892f798d09f41c804aeaa301Matt Sweeney value = value.replace(new RegExp('(?:^|,\\s)' + name + ',?'), ',');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _onNativeEnd: function(e) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney name = Transition._toCamel(event.propertyName),
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney //node.fire('transition:propertyEnd', data);
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney if (anim._count <= 0) { // after propertyEnd fires
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney destroy: function() {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney if (anim._detach) {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney anim._detach.detach();
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney //anim._node[ON_TRANSITION_END] = null;
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney node.removeEventListener(TRANSITION_END, anim._onNativeEnd, false);
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt SweeneyY.TransitionNative = Transition; // TODO: remove
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * Animate one or more css properties to a given value. Requires the "transition" module.
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * <pre>example usage:
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * Y.one('#demo').transition({
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * duration: 1, // in seconds, default is 0.5
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * easing: 'ease-out', // default is 'ease'
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney * delay: '1', // delay start for 1 second, default is 0
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * height: '10px',
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * width: '10px',
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * opacity: { // per property
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * duration: 2,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * easing: 'ease-in'
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * @method transition
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * @param {Object} config An object containing one or more style properties, a duration and an easing.
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * @param {Function} callback A function to run after the transition has completed.
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * @chainable
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.Node.prototype.transition = function(name, config, callback) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney anim = (transitionAttrs) ? transitionAttrs.transition || null : null,
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (typeof name === 'string') { // named effect, pull config from registry
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney } else { // name is a config, config is a callback or undefined
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney return this;
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt SweeneyY.Node.prototype.show = function(name, config, callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney else if (name && !Y.Transition) { Y.log('unable to transition show; missing transition module', 'warn', 'node'); }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney return this;
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeneyvar _wrapCallBack = function(anim, fn, callback) {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney return function() {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt SweeneyY.Node.prototype.hide = function(name, config, callback) {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney } else if (name && !Y.Transition) { Y.log('unable to transition hide; missing transition module', 'warn', 'node'); // end if on nex
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney return this;
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney * Animate one or more css properties to a given value. Requires the "transition" module.
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney * <pre>example usage:
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * Y.all('.demo').transition({
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney * duration: 1, // in seconds, default is 0.5
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * easing: 'ease-out', // default is 'ease'
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney * delay: '1', // delay start for 1 second, default is 0
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * height: '10px',
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * width: '10px',
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney * opacity: { // per property
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * duration: 2,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * easing: 'ease-in'
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * @for NodeList
f0d88feb1b7e3a775e0e9c8648faf84a32250546Matt Sweeney * @method transition
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * @param {Object} config An object containing one or more style properties, a duration and an easing.
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * @param {Function} callback A function to run after the transition has completed. The callback fires
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * once per item in the NodeList.
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney * @chainable
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.NodeList.prototype.transition = function(config, callback) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney return this;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.Node.prototype.toggleView = function(name, on, callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof name == 'boolean') { // no transition, just toggle
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (typeof on == 'undefined' && name in this._toggles) { // reverse current toggle
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney callback = _wrapCallBack(this, this._hide, callback);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney this.transition(Y.Transition.toggles[name][on], callback);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney return this;
484ded111840f4104ab556e0628b0e84632eba34Matt SweeneyY.NodeList.prototype.toggleView = function(name, on, callback) {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney return this;