transition-debug.js revision 0df23d09dc16bc41af5ceff68c11ed9c7d6285ed
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyYUI.add('transition-native', function(Y) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
9c94a3bab3da130a453194d151f33f11cd53f44eMatt Sweeney/**
9c94a3bab3da130a453194d151f33f11cd53f44eMatt Sweeney* Provides the transition method for Node.
4527b08ced97d1bf5f88cf786302fd66eb80a35bMatt Sweeney* Transition has no API of its own, but adds the transition method to Node.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney*
60dcf3ebba038d9ec57d617a7395a9bff15802fcMatt Sweeney* @module transition
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney* @requires node-style
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney*/
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeneyvar TRANSITION = '-webkit-transition',
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney TRANSITION_CAMEL = 'WebkitTransition',
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney TRANSITION_PROPERTY_CAMEL = 'WebkitTransitionProperty',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney TRANSITION_PROPERTY = '-webkit-transition-property',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney TRANSITION_DURATION = '-webkit-transition-duration',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney TRANSITION_TIMING_FUNCTION = '-webkit-transition-timing-function',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney TRANSITION_DELAY = '-webkit-transition-delay',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney TRANSITION_END = 'webkitTransitionEnd',
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney ON_TRANSITION_END = 'onwebkittransitionend',
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney TRANSFORM_CAMEL = 'WebkitTransform',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney EMPTY_OBJ = {},
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney/**
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * A class for constructing transition instances.
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * Adds the "transition" method to Node.
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * @class Transition
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * @constructor
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney */
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition = function() {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney this.init.apply(this, arguments);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney};
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTransition.fx = {};
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTransition.toggles = {};
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyTransition._hasEnd = {};
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt SweeneyTransition._toCamel = function(property) {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney property = property.replace(/-([a-z])/gi, function(m0, m1) {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney return m1.toUpperCase();
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney });
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney return property;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney};
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt SweeneyTransition._toHyphen = function(property) {
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney property = property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g, function(m0, m1, m2, m3) {
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney var str = '';
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney if (m1) {
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney str += '-' + m1.toLowerCase();
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney }
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney str += m2;
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney if (m3) {
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney str += '-' + m3.toLowerCase();
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney }
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney
bf3c648d6ab588c8b04fb824a7281898c469bd67Matt Sweeney return str;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney });
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney return property;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney};
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt SweeneyTransition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition.useNative = false;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeneyif (TRANSITION in Y.config.doc.documentElement.style) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney Transition.useNative = true;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney Transition.supported = true; // TODO: remove
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney}
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.Node.DOM_EVENTS[TRANSITION_END] = 1;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition.NAME = 'transition';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt SweeneyTransition.DEFAULT_EASING = 'ease';
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition.DEFAULT_DURATION = 0.5;
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition.DEFAULT_DELAY = 0;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt SweeneyTransition._nodeAttrs = {};
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyTransition.prototype = {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney constructor: Transition,
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney init: function(node, config) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney var anim = this;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney anim._node = node;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney if (!anim._running && config) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._config = config;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney node._transition = anim; // cache for reuse
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._duration = ('duration' in config) ?
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney config.duration: anim.constructor.DEFAULT_DURATION;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._delay = ('delay' in config) ?
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney config.delay: anim.constructor.DEFAULT_DELAY;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._easing = config.easing || anim.constructor.DEFAULT_EASING;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._count = 0; // track number of animated properties
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._running = false;
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney return anim;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney addProperty: function(prop, config) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney var anim = this,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node = this._node,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney uid = Y.stamp(node),
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney nodeInstance = Y.one(node),
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attrs = Transition._nodeAttrs[uid],
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney dur,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney attr,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney val;
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (!attrs) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attrs = Transition._nodeAttrs[uid] = {};
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney attr = attrs[prop];
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // might just be a value
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (config && config.value !== undefined) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney val = config.value;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney } else if (config !== undefined) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney val = config;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney config = EMPTY_OBJ;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (typeof val === 'function') {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney val = val.call(nodeInstance, nodeInstance);
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney if (attr && attr.transition) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney // take control if another transition owns this property
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney if (attr.transition !== anim) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney attr.transition._count--; // remapping attr to this transition
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney }
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney }
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._count++; // properties per transition
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney // make 0 async and fire events
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney dur = ((typeof config.duration !== 'undefined') ? config.duration :
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney anim._duration) || 0.0001;
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney attrs[prop] = {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney value: val,
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney duration: dur,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney delay: (typeof config.delay !== 'undefined') ? config.delay :
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._delay,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney easing: config.easing || anim._easing,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney transition: anim
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney };
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney if (Transition.useNative && Y.DOM.getComputedStyle(node, prop) === val) {
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney setTimeout(function() {
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney anim._onNativeEnd.call(node, {
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney propertyName: prop,
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney elapsedTime: dur
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney });
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney }, dur * 1000);
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney }
0df23d09dc16bc41af5ceff68c11ed9c7d6285edMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney },
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney removeProperty: function(prop) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var anim = this,
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney attrs = Transition._nodeAttrs[Y.stamp(anim._node)];
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (attrs && attrs[prop]) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney delete attrs[prop];
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._count--;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney },
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney initAttrs: function(config) {
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney var attr,
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney node = this._node;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (config.transform && !config[TRANSFORM_CAMEL]) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney config[TRANSFORM_CAMEL] = config.transform;
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney delete config.transform; // TODO: copy
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney }
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney for (attr in config) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney this.addProperty(attr, config[attr]);
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney // when size is auto or % webkit starts from zero instead of computed
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney // (https://bugs.webkit.org/show_bug.cgi?id=16020)
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney // TODO: selective set
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney if (node.style[attr] === '') {
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney Y.DOM.setStyle(node, attr, Y.DOM.getComputedStyle(node, attr));
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney }
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney }
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
59171f95d68f00afaea1a329e4a463e2cb75bec0Matt Sweeney /**
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * Starts or an animation.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @method run
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @chainable
59171f95d68f00afaea1a329e4a463e2cb75bec0Matt Sweeney * @private
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney */
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney run: function(callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney var anim = this,
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney node = anim._node,
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney config = anim._config,
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney data = {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney type: 'transition:start',
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney config: config
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney };
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (!anim._running) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney anim._running = true;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
3f4cbe6edb218980892f798d09f41c804aeaa301Matt Sweeney //anim._node.fire('transition:start', data);
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney if (config.on && config.on.start) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney config.on.start.call(Y.one(node), data);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney anim.initAttrs(anim._config);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney anim._callback = callback;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney anim._start();
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney return anim;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _start: function() {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney this._runNative();
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _prepDur: function(dur) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney dur = parseFloat(dur);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney return dur + 's';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _runNative: function(time) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney var anim = this,
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney node = anim._node,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney uid = Y.stamp(node),
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney style = node.style,
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney computed = getComputedStyle(node),
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attrs = Transition._nodeAttrs[uid],
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney cssText = '',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney cssTransition = computed[TRANSITION_PROPERTY],
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney transitionText = TRANSITION_PROPERTY + ': ',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney duration = TRANSITION_DURATION + ': ',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing = TRANSITION_TIMING_FUNCTION + ': ',
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney delay = TRANSITION_DELAY + ': ',
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney hyphy,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attr,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney name;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // preserve existing transitions
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (cssTransition !== 'all') {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney transitionText += cssTransition + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney duration += computed[TRANSITION_DURATION] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing += computed[TRANSITION_TIMING_FUNCTION] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney delay += computed[TRANSITION_DELAY] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // run transitions mapped to this instance
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney for (name in attrs) {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney hyphy = Transition._toHyphen(name);
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attr = attrs[name];
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (attrs.hasOwnProperty(name) && attr.transition === anim) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney if (name in node.style) { // only native styles allowed
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney duration += anim._prepDur(attr.duration) + ',';
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney delay += anim._prepDur(attr.delay) + ',';
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney easing += (attr.easing) + ',';
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney transitionText += hyphy + ',';
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney cssText += hyphy + ': ' + attr.value + '; ';
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney } else {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney this.removeProperty(name);
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney transitionText = transitionText.replace(/,$/, ';');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney duration = duration.replace(/,$/, ';');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney easing = easing.replace(/,$/, ';');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney delay = delay.replace(/,$/, ';');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // only one native end event per node
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney if (!Transition._hasEnd[uid]) {
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney //anim._detach = Y.on(TRANSITION_END, anim._onNativeEnd, node);
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney //node[ON_TRANSITION_END] = anim._onNativeEnd;
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney node.addEventListener(TRANSITION_END, anim._onNativeEnd, false);
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney Transition._hasEnd[uid] = true;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney //setTimeout(function() { // allow updates to apply (size fix, onstart, etc)
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney style.cssText += transitionText + duration + easing + delay + cssText;
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney //}, 1);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney _end: function(elapsed) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney var anim = this,
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney node = anim._node,
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney callback = anim._callback,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney config = anim._config,
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney data = {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney type: 'transition:end',
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney config: config,
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney elapsedTime: elapsed
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney },
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney nodeInstance = Y.one(node);
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._running = false;
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney anim._callback = null;
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney if (node) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney if (config.on && config.on.end) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney setTimeout(function() { // IE: allow previous update to finish
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney config.on.end.call(nodeInstance, data);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney // nested to ensure proper fire order
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney if (callback) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney callback.call(nodeInstance, data);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney }
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney }, 1);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney } else if (callback) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney setTimeout(function() { // IE: allow previous update to finish
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney callback.call(nodeInstance, data);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney }, 1);
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney }
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney //node.fire('transition:end', data);
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney }
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney },
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney _endNative: function(name) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney var node = this._node,
ac08645fa535c4f48d2fa888fee02423ff9afe17Matt Sweeney value = node.ownerDocument.defaultView.getComputedStyle(node, '')[TRANSITION_PROPERTY];
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (typeof value === 'string') {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney value = value.replace(new RegExp('(?:^|,\\s)' + name + ',?'), ',');
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney value = value.replace(/^,|,$/, '');
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney node.style[TRANSITION_CAMEL] = value;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney }
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney },
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _onNativeEnd: function(e) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney var node = this,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney uid = Y.stamp(node),
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney event = e,//e._event,
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney name = Transition._toCamel(event.propertyName),
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney elapsed = event.elapsedTime,
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attrs = Transition._nodeAttrs[uid],
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attr = attrs[name],
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney anim = (attr) ? attr.transition : null,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney data,
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney config;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney if (anim) {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim.removeProperty(name);
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._endNative(name);
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney config = anim._config[name];
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney data = {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney type: 'propertyEnd',
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney propertyName: name,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney elapsedTime: elapsed,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney config: config
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney };
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney if (config && config.on && config.on.end) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney config.on.end.call(Y.one(node), data);
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney }
056ec5e3a7c6ad7819398c8c3e6e225386c4bbd0Matt Sweeney
3f4cbe6edb218980892f798d09f41c804aeaa301Matt Sweeney //node.fire('transition:propertyEnd', data);
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney if (anim._count <= 0) { // after propertyEnd fires
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._end(elapsed);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney },
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney destroy: function() {
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney var anim = this;
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney /*
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney if (anim._detach) {
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney anim._detach.detach();
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney }
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney */
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney //anim._node[ON_TRANSITION_END] = null;
564c5c8d77e1fe074bfa96133bfdbbd0707c1ed3Matt Sweeney node.removeEventListener(TRANSITION_END, anim._onNativeEnd, false);
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney anim._node = null;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney};
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.Transition = Transition;
959c053d56a076109993a2f14094d20b1f8c0c17Matt SweeneyY.TransitionNative = Transition; // TODO: remove
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney/**
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * Animate one or more css properties to a given value. Requires the "transition" module.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * <pre>example usage:
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * Y.one('#demo').transition({
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * duration: 1, // in seconds, default is 0.5
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * easing: 'ease-out', // default is 'ease'
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * delay: '1', // delay start for 1 second, default is 0
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney *
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * height: '10px',
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * width: '10px',
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney *
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * opacity: { // per property
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * value: 0,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * duration: 2,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * delay: 2,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * easing: 'ease-in'
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * }
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * });
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * </pre>
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @for Node
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @method transition
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @param {Object} config An object containing one or more style properties, a duration and an easing.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @param {Function} callback A function to run after the transition has completed.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @chainable
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney*/
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt SweeneyY.Node.prototype.transition = function(name, config, callback) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney var
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney anim = (transitionAttrs) ? transitionAttrs.transition || null : null,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney fxConfig,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney prop;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (typeof name === 'string') { // named effect, pull config from registry
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (typeof config === 'function') {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney callback = config;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney config = null;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney fxConfig = Transition.fx[name];
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (config && typeof config !== 'boolean') {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney config = Y.clone(config);
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney for (prop in fxConfig) {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (fxConfig.hasOwnProperty(prop)) {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (! (prop in config)) {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney config[prop] = fxConfig[prop];
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney } else {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney config = fxConfig;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney } else { // name is a config, config is a callback or undefined
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney callback = config;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney config = name;
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (anim && !anim._running) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney anim.init(this, config);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney } else {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney anim = new Transition(this._node, config);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney }
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney anim.run(callback);
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney return this;
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney};
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt SweeneyY.Node.prototype.show = function(name, config, callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney this._show(); // show prior to transition
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (name && Y.Transition) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof config === 'function') {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney callback = config;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney config = name;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney name = this.SHOW_TRANSITION;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney this.transition(name, config, callback);
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney else if (name && !Y.Transition) { Y.log('unable to transition show; missing transition module', 'warn', 'node'); }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney return this;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney};
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeneyvar _wrapCallBack = function(anim, fn, callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney return function() {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (fn) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney fn.call(anim);
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney if (callback) {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney callback.apply(anim._node, arguments);
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney }
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney };
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney};
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt SweeneyY.Node.prototype.hide = function(name, config, callback) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (name && Y.Transition) {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof config === 'function') {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney callback = config;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney config = null;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney if (typeof config === 'function') {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney callback = config;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney config = name;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney name = this.HIDE_TRANSITION;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney this.transition(name, config, callback);
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney } else if (name && !Y.Transition) { Y.log('unable to transition hide; missing transition module', 'warn', 'node'); // end if on nex
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney } else {
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney this._hide();
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney }
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney return this;
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney};
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney/**
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * Animate one or more css properties to a given value. Requires the "transition" module.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * <pre>example usage:
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * Y.all('.demo').transition({
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * duration: 1, // in seconds, default is 0.5
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * easing: 'ease-out', // default is 'ease'
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * delay: '1', // delay start for 1 second, default is 0
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney *
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * height: '10px',
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * width: '10px',
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney *
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * opacity: { // per property
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * value: 0,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * duration: 2,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * delay: 2,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * easing: 'ease-in'
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * }
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * });
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * </pre>
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @for NodeList
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @method transition
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @param {Object} config An object containing one or more style properties, a duration and an easing.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @param {Function} callback A function to run after the transition has completed. The callback fires
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * once per item in the NodeList.
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney * @chainable
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney*/
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt SweeneyY.NodeList.prototype.transition = function(config, callback) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney var nodes = this._nodes,
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney i = 0,
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney node;
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney while ((node = nodes[i++])) {
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney Y.one(node).transition(config, callback);
142b1eb4e6b33c96ecf163bf42d31147b2e0e1d0Matt Sweeney }
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney return this;
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney};
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.Node.prototype.toggleView = function(name, on) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney var callback;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney this._toggles = this._toggles || [];
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney if (typeof name == 'boolean') { // no transition, just toggle
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney on = name;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney }
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney if (typeof on === 'undefined' && name in this._toggles) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney on = ! this._toggles[name];
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney }
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney on = (on) ? 1 : 0;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney if (on) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney this._show();
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney } else {
b92e4372c5a34f48e457b60dfa9b136cf19c8498Matt Sweeney callback = _wrapCallBack(anim, this._hide);
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney }
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney this._toggles[name] = on;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney this.transition(Y.Transition.toggles[name][on], callback);
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney};
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.NodeList.prototype.toggleView = function(config, callback) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney var nodes = this._nodes,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney i = 0,
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney node;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney while ((node = nodes[i++])) {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney Y.one(node).toggleView(config, callback);
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney }
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney return this;
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney};
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.mix(Transition.fx, {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney fadeOut: {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney opacity: 0,
73857faca3d4266c7840cd6ce428a71cf9a94d0cMatt Sweeney duration: 0.5,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney easing: 'ease-out'
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney },
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney fadeIn: {
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney opacity: 1,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney duration: 0.5,
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney easing: 'ease-in'
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney },
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney sizeOut: {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney height: 0,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney width: 0,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney duration: 0.75,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney easing: 'ease-out'
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney },
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney sizeIn: {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney height: function(node) {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney return node.get('scrollHeight') + 'px';
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney },
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney width: function(node) {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney return node.get('scrollWidth') + 'px';
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney },
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney duration: 0.5,
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney easing: 'ease-in',
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney on: {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney start: function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney var overflow = this.getStyle('overflow');
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney if (overflow !== 'hidden') { // enable scrollHeight/Width
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney this.setStyle('overflow', 'hidden');
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney this._transitionOverflow = overflow;
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney },
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney end: function() {
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney if (this._transitionOverflow) { // revert overridden value
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney this.setStyle('overflow', this._transitionOverflow);
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }
484ded111840f4104ab556e0628b0e84632eba34Matt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney }
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney});
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt SweeneyY.mix(Transition.toggles, {
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney size: ['sizeIn', 'sizeOut'],
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney fade: ['fadeOut', 'fadeIn']
0512667d3ebce1dd2bac2bd1de6367420402cfb3Matt Sweeney});
Error!

 

There was an error!

null

java.lang.NullPointerException