transition-debug.js revision 0512667d3ebce1dd2bac2bd1de6367420402cfb3
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
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney* @requires node
959c053d56a076109993a2f14094d20b1f8c0c17Matt 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',
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * A class for constructing transition instances.
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * Adds the "transition" method to Node.
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * @class Transition
ef982fe144b380cd6cd8dd1bc6ba74c7210033f9Matt Sweeney * @constructor
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney property = property.replace(/-([a-z])/gi, function(m0, m1) {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney property = property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g, function(m0, m1, m2, m3) {
f01d121976553130cab6089d35c71d5b947d1204Matt SweeneyTransition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeneyif (TRANSITION in Y.config.doc.documentElement.style) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney config.duration: anim.constructor.DEFAULT_DURATION;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._easing = config.easing || anim.constructor.DEFAULT_EASING;
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._count = 0; // track number of animated properties
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // might just be a value
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // take control if another transition owns this property
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney attr.transition._count--; // remapping attr to this transition
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // when size is auto or % webkit starts from zero instead of computed
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // (https://bugs.webkit.org/show_bug.cgi?id=16020)
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // workaround by setting to current value
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // TODO: move to run
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney if (prop == 'height' || prop == 'width') {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney // avoid setting if already set or transitioning
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // TODO: handle inline percent / auto
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (!node._node.style[prop] && !node.getStyle(TRANSITION_PROPERTY_CAMEL) == 'prop') {
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney node.setStyle(prop, node.getComputedStyle(prop));
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration: ((typeof config.duration !== 'undefined') ? config.duration :
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney anim._duration) || 0.0001, // make 0 async and fire events
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney delay: (typeof config.delay !== 'undefined') ? config.delay :
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney attrs = Transition._nodeAttrs[Y.stamp(anim._node)];
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (config.transform && !config[TRANSFORM_CAMEL]) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * Starts or an animation.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @method run
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @chainable
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _start: function() {
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney // preserve existing transitions
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney duration += computed[TRANSITION_DURATION] + ',';
f01d121976553130cab6089d35c71d5b947d1204Matt Sweeney easing += computed[TRANSITION_TIMING_FUNCTION] + ',';
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney // run transitions mapped to this instance
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (attrs.hasOwnProperty(name) && attr.transition === anim) {
448834d88f7c2818b5a70125bba193051806ccf9Matt Sweeney if (name in domNode.style) { // only native styles allowed
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney duration += anim._prepDur(attr.duration) + ',';
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney transitionText = transitionText.replace(/,$/, ';');
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney // only one native end event per node
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney anim._detach = node.on(TRANSITION_END, anim._onNativeEnd);
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney //setTimeout(function() { // allow updates to apply (size fix, onstart, etc)
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney style.cssText += transitionText + duration + easing + delay + cssText;
0dfbad86367ee46837c580e51d7d76e8bd6d88b7Matt Sweeney setTimeout(function() { // IE: allow previous update to finish
100cd7da99ccec416d3021e9a567addc2d9ed3dfMatt Sweeney // nested to ensure proper fire order
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney } else if (callback) {
576e5aadaa60b824ce0a3875d3551ca3151a1957Matt Sweeney setTimeout(function() { // IE: allow previous update to finish
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney value = node.getComputedStyle(TRANSITION_PROPERTY);
6ae23e4adfd7a02fb24e8240a363e0decf126c95Matt Sweeney value = value.replace(new RegExp('(?:^|,\\s)' + name + ',?'), ',');
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney _onNativeEnd: function(e) {
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney name = Transition._toCamel(event.propertyName),
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney if (anim._count <= 0) { // after propertEnd fires
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney destroy: function() {
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({
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * duration: 1, // in seconds, default is 0.5
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt Sweeney * easing: 'ease-out', // default is 'ease'
c56d37350cde9ba6fcde1a42433b3d759fe2b2ecMatt 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,
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * easing: 'ease-in'
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @method transition
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @param {Object} config An object containing one or more style properties, a duration and an easing.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @param {Function} callback A function to run after the transition has completed.
959c053d56a076109993a2f14094d20b1f8c0c17Matt Sweeney * @chainable
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt SweeneyY.Node.prototype.transition = function(name, config, callback) {
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney transitionAttrs = Transition._nodeAttrs[Y.stamp(this)],
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney anim = (transitionAttrs) ? transitionAttrs.transition || null : null,
54329bf323458a34db1104ad4b4b0b1eaa1f12feMatt Sweeney if (typeof name === 'string') { // named effect, pull config from registry
a8592deb8f7e9124b473044326ef8cfadc4281d5Matt Sweeney } else { // name is a config, config is a callback or undefined