2
YUI 3.10.3 (build 2fb5187)
3
Copyright 2013 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
8
YUI.add('transition', function (Y, NAME) {
11
* Provides the transition method for Node.
12
* Transition has no API of its own, but adds the transition method to Node.
15
* @requires node-style
18
var CAMEL_VENDOR_PREFIX = '',
20
DOCUMENT = Y.config.doc,
21
DOCUMENT_ELEMENT = 'documentElement',
22
DOCUMENT_STYLE = DOCUMENT[DOCUMENT_ELEMENT].style,
23
TRANSITION_CAMEL = 'transition',
24
TRANSITION_PROPERTY_CAMEL = 'transitionProperty',
27
TRANSITION_TIMING_FUNCTION,
39
VENDOR_TRANSITION_END = {
40
Webkit: 'webkitTransitionEnd'
44
* A class for constructing transition instances.
45
* Adds the "transition" method to Node.
50
Transition = function() {
51
this.init.apply(this, arguments);
54
// One off handling of transform-prefixing.
55
Transition._TRANSFORM = 'transform';
57
Transition._toCamel = function(property) {
58
property = property.replace(/-([a-z])/gi, function(m0, m1) {
59
return m1.toUpperCase();
65
Transition._toHyphen = function(property) {
66
property = property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g, function(m0, m1, m2, m3) {
67
var str = ((m1) ? '-' + m1.toLowerCase() : '') + m2;
70
str += '-' + m3.toLowerCase();
79
Transition.SHOW_TRANSITION = 'fadeIn';
80
Transition.HIDE_TRANSITION = 'fadeOut';
82
Transition.useNative = false;
84
// Map transition properties to vendor-specific versions.
85
if ('transition' in DOCUMENT_STYLE
86
&& 'transitionProperty' in DOCUMENT_STYLE
87
&& 'transitionDuration' in DOCUMENT_STYLE
88
&& 'transitionTimingFunction' in DOCUMENT_STYLE
89
&& 'transitionDelay' in DOCUMENT_STYLE) {
90
Transition.useNative = true;
91
Transition.supported = true; // TODO: remove
93
Y.Array.each(VENDORS, function(val) { // then vendor specific
94
var property = val + 'Transition';
95
if (property in DOCUMENT[DOCUMENT_ELEMENT].style) {
96
CAMEL_VENDOR_PREFIX = val;
97
VENDOR_PREFIX = Transition._toHyphen(val) + '-';
99
Transition.useNative = true;
100
Transition.supported = true; // TODO: remove
101
Transition._VENDOR_PREFIX = val;
106
// Map transform property to vendor-specific versions.
107
// One-off required for cssText injection.
108
if (typeof DOCUMENT_STYLE.transform === 'undefined') {
109
Y.Array.each(VENDORS, function(val) { // then vendor specific
110
var property = val + 'Transform';
111
if (typeof DOCUMENT_STYLE[property] !== 'undefined') {
112
Transition._TRANSFORM = property;
117
if (CAMEL_VENDOR_PREFIX) {
118
TRANSITION_CAMEL = CAMEL_VENDOR_PREFIX + 'Transition';
119
TRANSITION_PROPERTY_CAMEL = CAMEL_VENDOR_PREFIX + 'TransitionProperty';
122
TRANSITION_PROPERTY = VENDOR_PREFIX + 'transition-property';
123
TRANSITION_DURATION = VENDOR_PREFIX + 'transition-duration';
124
TRANSITION_TIMING_FUNCTION = VENDOR_PREFIX + 'transition-timing-function';
125
TRANSITION_DELAY = VENDOR_PREFIX + 'transition-delay';
127
TRANSITION_END = 'transitionend';
128
ON_TRANSITION_END = 'on' + CAMEL_VENDOR_PREFIX.toLowerCase() + 'transitionend';
129
TRANSITION_END = VENDOR_TRANSITION_END[CAMEL_VENDOR_PREFIX] || TRANSITION_END;
132
Transition.toggles = {};
134
Transition._hasEnd = {};
136
Transition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;
138
Y.Node.DOM_EVENTS[TRANSITION_END] = 1;
140
Transition.NAME = 'transition';
142
Transition.DEFAULT_EASING = 'ease';
143
Transition.DEFAULT_DURATION = 0.5;
144
Transition.DEFAULT_DELAY = 0;
146
Transition._nodeAttrs = {};
148
Transition.prototype = {
149
constructor: Transition,
150
init: function(node, config) {
153
if (!anim._running && config) {
154
anim._config = config;
155
node._transition = anim; // cache for reuse
157
anim._duration = ('duration' in config) ?
158
config.duration: anim.constructor.DEFAULT_DURATION;
160
anim._delay = ('delay' in config) ?
161
config.delay: anim.constructor.DEFAULT_DELAY;
163
anim._easing = config.easing || anim.constructor.DEFAULT_EASING;
164
anim._count = 0; // track number of animated properties
165
anim._running = false;
172
addProperty: function(prop, config) {
176
nodeInstance = Y.one(node),
177
attrs = Transition._nodeAttrs[uid],
185
attrs = Transition._nodeAttrs[uid] = {};
190
// might just be a value
191
if (config && config.value !== undefined) {
193
} else if (config !== undefined) {
198
if (typeof val === 'function') {
199
val = val.call(nodeInstance, nodeInstance);
202
if (attr && attr.transition) {
203
// take control if another transition owns this property
204
if (attr.transition !== anim) {
205
attr.transition._count--; // remapping attr to this transition
209
anim._count++; // properties per transition
211
// make 0 async and fire events
212
dur = ((typeof config.duration !== 'undefined') ? config.duration :
213
anim._duration) || 0.0001;
218
delay: (typeof config.delay !== 'undefined') ? config.delay :
221
easing: config.easing || anim._easing,
226
// native end event doesnt fire when setting to same value
227
// supplementing with timer
228
// val may be a string or number (height: 0, etc), but computedStyle is always string
229
computed = Y.DOM.getComputedStyle(node, prop);
230
compareVal = (typeof val === 'string') ? computed : parseFloat(computed);
232
if (Transition.useNative && compareVal === val) {
233
setTimeout(function() {
234
anim._onNativeEnd.call(node, {
242
removeProperty: function(prop) {
244
attrs = Transition._nodeAttrs[Y.stamp(anim._node)];
246
if (attrs && attrs[prop]) {
253
initAttrs: function(config) {
257
if (config.transform && !config[Transition._TRANSFORM]) {
258
config[Transition._TRANSFORM] = config.transform;
259
delete config.transform; // TODO: copy
262
for (attr in config) {
263
if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {
264
this.addProperty(attr, config[attr]);
266
// when size is auto or % webkit starts from zero instead of computed
267
// (https://bugs.webkit.org/show_bug.cgi?id=16020)
268
// TODO: selective set
269
if (node.style[attr] === '') {
270
Y.DOM.setStyle(node, attr, Y.DOM.getComputedStyle(node, attr));
277
* Starts or an animation.
282
run: function(callback) {
285
config = anim._config,
287
type: 'transition:start',
292
if (!anim._running) {
293
anim._running = true;
295
if (config.on && config.on.start) {
296
config.on.start.call(Y.one(node), data);
299
anim.initAttrs(anim._config);
301
anim._callback = callback;
313
_prepDur: function(dur) {
314
dur = parseFloat(dur) * 1000;
319
_runNative: function() {
324
computed = node.ownerDocument.defaultView.getComputedStyle(node),
325
attrs = Transition._nodeAttrs[uid],
327
cssTransition = computed[Transition._toCamel(TRANSITION_PROPERTY)],
329
transitionText = TRANSITION_PROPERTY + ': ',
330
duration = TRANSITION_DURATION + ': ',
331
easing = TRANSITION_TIMING_FUNCTION + ': ',
332
delay = TRANSITION_DELAY + ': ',
337
// preserve existing transitions
338
if (cssTransition !== 'all') {
339
transitionText += cssTransition + ',';
340
duration += computed[Transition._toCamel(TRANSITION_DURATION)] + ',';
341
easing += computed[Transition._toCamel(TRANSITION_TIMING_FUNCTION)] + ',';
342
delay += computed[Transition._toCamel(TRANSITION_DELAY)] + ',';
346
// run transitions mapped to this instance
347
for (name in attrs) {
348
hyphy = Transition._toHyphen(name);
350
if ((attr = attrs[name]) && attr.transition === anim) {
351
if (name in node.style) { // only native styles allowed
352
duration += anim._prepDur(attr.duration) + ',';
353
delay += anim._prepDur(attr.delay) + ',';
354
easing += (attr.easing) + ',';
356
transitionText += hyphy + ',';
357
cssText += hyphy + ': ' + attr.value + '; ';
359
this.removeProperty(name);
364
transitionText = transitionText.replace(/,$/, ';');
365
duration = duration.replace(/,$/, ';');
366
easing = easing.replace(/,$/, ';');
367
delay = delay.replace(/,$/, ';');
369
// only one native end event per node
370
if (!Transition._hasEnd[uid]) {
371
node.addEventListener(TRANSITION_END, anim._onNativeEnd, '');
372
Transition._hasEnd[uid] = true;
376
style.cssText += transitionText + duration + easing + delay + cssText;
380
_end: function(elapsed) {
383
callback = anim._callback,
384
config = anim._config,
386
type: 'transition:end',
391
nodeInstance = Y.one(node);
393
anim._running = false;
394
anim._callback = null;
397
if (config.on && config.on.end) {
398
setTimeout(function() { // IE: allow previous update to finish
399
config.on.end.call(nodeInstance, data);
401
// nested to ensure proper fire order
403
callback.call(nodeInstance, data);
407
} else if (callback) {
408
setTimeout(function() { // IE: allow previous update to finish
409
callback.call(nodeInstance, data);
416
_endNative: function(name) {
417
var node = this._node,
418
value = node.ownerDocument.defaultView.getComputedStyle(node, '')[Transition._toCamel(TRANSITION_PROPERTY)];
420
name = Transition._toHyphen(name);
421
if (typeof value === 'string') {
422
value = value.replace(new RegExp('(?:^|,\\s)' + name + ',?'), ',');
423
value = value.replace(/^,|,$/, '');
424
node.style[TRANSITION_CAMEL] = value;
428
_onNativeEnd: function(e) {
431
event = e,//e._event,
432
name = Transition._toCamel(event.propertyName),
433
elapsed = event.elapsedTime,
434
attrs = Transition._nodeAttrs[uid],
436
anim = (attr) ? attr.transition : null,
441
anim.removeProperty(name);
442
anim._endNative(name);
443
config = anim._config[name];
448
elapsedTime: elapsed,
452
if (config && config.on && config.on.end) {
453
config.on.end.call(Y.one(node), data);
456
if (anim._count <= 0) { // after propertyEnd fires
458
node.style[TRANSITION_PROPERTY_CAMEL] = ''; // clean up style
463
destroy: function() {
468
node.removeEventListener(TRANSITION_END, anim._onNativeEnd, false);
474
Y.Transition = Transition;
475
Y.TransitionNative = Transition; // TODO: remove
478
* Animate one or more css properties to a given value. Requires the "transition" module.
479
* <pre>example usage:
480
* Y.one('#demo').transition({
481
* duration: 1, // in seconds, default is 0.5
482
* easing: 'ease-out', // default is 'ease'
483
* delay: '1', // delay start for 1 second, default is 0
488
* opacity: { // per property
498
* @param {Object} config An object containing one or more style properties, a duration and an easing.
499
* @param {Function} callback A function to run after the transition has completed.
502
Y.Node.prototype.transition = function(name, config, callback) {
504
transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],
505
anim = (transitionAttrs) ? transitionAttrs.transition || null : null,
509
if (typeof name === 'string') { // named effect, pull config from registry
510
if (typeof config === 'function') {
515
fxConfig = Transition.fx[name];
517
if (config && typeof config !== 'boolean') {
518
config = Y.clone(config);
520
for (prop in fxConfig) {
521
if (fxConfig.hasOwnProperty(prop)) {
522
if (! (prop in config)) {
523
config[prop] = fxConfig[prop];
531
} else { // name is a config, config is a callback or undefined
536
if (anim && !anim._running) {
537
anim.init(this, config);
539
anim = new Transition(this._node, config);
546
Y.Node.prototype.show = function(name, config, callback) {
547
this._show(); // show prior to transition
548
if (name && Y.Transition) {
549
if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
550
if (typeof config === 'function') {
554
name = Transition.SHOW_TRANSITION;
556
this.transition(name, config, callback);
561
Y.NodeList.prototype.show = function(name, config, callback) {
562
var nodes = this._nodes,
566
while ((node = nodes[i++])) {
567
Y.one(node).show(name, config, callback);
575
var _wrapCallBack = function(anim, fn, callback) {
580
if (callback && typeof callback === 'function') {
581
callback.apply(anim._node, arguments);
586
Y.Node.prototype.hide = function(name, config, callback) {
587
if (name && Y.Transition) {
588
if (typeof config === 'function') {
593
callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback
594
if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default
595
if (typeof config === 'function') {
599
name = Transition.HIDE_TRANSITION;
601
this.transition(name, config, callback);
608
Y.NodeList.prototype.hide = function(name, config, callback) {
609
var nodes = this._nodes,
613
while ((node = nodes[i++])) {
614
Y.one(node).hide(name, config, callback);
621
* Animate one or more css properties to a given value. Requires the "transition" module.
622
* <pre>example usage:
623
* Y.all('.demo').transition({
624
* duration: 1, // in seconds, default is 0.5
625
* easing: 'ease-out', // default is 'ease'
626
* delay: '1', // delay start for 1 second, default is 0
631
* opacity: { // per property
641
* @param {Object} config An object containing one or more style properties, a duration and an easing.
642
* @param {Function} callback A function to run after the transition has completed. The callback fires
643
* once per item in the NodeList.
646
Y.NodeList.prototype.transition = function(config, callback) {
647
var nodes = this._nodes,
651
while ((node = nodes[i++])) {
652
Y.one(node).transition(config, callback);
658
Y.Node.prototype.toggleView = function(name, on, callback) {
659
this._toggles = this._toggles || [];
660
callback = arguments[arguments.length - 1];
662
if (typeof name !== 'string') { // no transition, just toggle
664
this._toggleView(on, callback); // call original _toggleView in Y.Node
668
if (typeof on === 'function') { // Ignore "on" if used for callback argument.
672
if (typeof on === 'undefined' && name in this._toggles) { // reverse current toggle
673
on = ! this._toggles[name];
680
callback = _wrapCallBack(this, this._hide, callback);
683
this._toggles[name] = on;
684
this.transition(Y.Transition.toggles[name][on], callback);
689
Y.NodeList.prototype.toggleView = function(name, on, callback) {
690
var nodes = this._nodes,
694
while ((node = nodes[i++])) {
696
node.toggleView.apply(node, arguments);
702
Y.mix(Transition.fx, {
723
height: function(node) {
724
return node.get('scrollHeight') + 'px';
726
width: function(node) {
727
return node.get('scrollWidth') + 'px';
734
var overflow = this.getStyle('overflow');
735
if (overflow !== 'hidden') { // enable scrollHeight/Width
736
this.setStyle('overflow', 'hidden');
737
this._transitionOverflow = overflow;
742
if (this._transitionOverflow) { // revert overridden value
743
this.setStyle('overflow', this._transitionOverflow);
744
delete this._transitionOverflow;
751
Y.mix(Transition.toggles, {
752
size: ['sizeOut', 'sizeIn'],
753
fade: ['fadeOut', 'fadeIn']
757
}, '3.10.3', {"requires": ["node-style"]});