1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
//Copyright (C) 2008 Apple Inc. All Rights Reserved.
function Transitions () {
// callback for the first batch of operation, where we set the default properties
// for the transition (transition-property and transition-duration) as well as
// the "from" property value if explicitely passed as a param to .add()
this.instantOperations = new Function ();
// callback for the second batch of operation, where we set the "to" property value
this.deferredOperations = new Function ();
};
// Core defaults for the transitions, you can update these members so that all
// calls to .add() from that point on use this duration and set of properties
Transitions.DEFAULTS = {
duration : 1, // default to 1 second
properties : []
};
/*
Adds a CSS transition, parameters are :
element: target element for transition
duration: duration for all transitions in seconds
properties: the properties that are transitioned (will be fed to '-webkit-transition-property')
from: optional list of initial property values to match properties passed as .properties
to: list of final property values to match properties passed as .properties
The .duration and .properties parameters are optional and can be defined once for
all upcoming transitions by over-riding the Transition.DEFAULTS properties
Some operations need to be deferred so that the styles are currently set for the from state
of from / to operations
*/
Transitions.prototype.add = function (params) {
var style = params.element.style;
// set up properties
var properties = (params.properties) ? params.properties : Transitions.DEFAULTS.properties;
// set up durations
var duration = ((params.duration) ? params.duration : Transitions.DEFAULTS.duration) + 's';
var durations = [];
for (var i = 0; i < properties.length; i++) {
durations.push(duration);
}
// from/to animation
if (params.from) {
this.addInstantOperation(function () {
style.webkitTransitionProperty = 'none';
for (var i = 0; i < properties.length; i++) {
style.setProperty(properties[i], params.from[i], '');
}
});
this.addDeferredOperation(function () {
style.webkitTransitionProperty = properties.join(', ');
style.webkitTransitionDuration = durations.join(', ');
for (var i = 0; i < properties.length; i++) {
style.setProperty(properties[i], params.to[i], '');
}
});
}
// to-only animation
else {
this.addDeferredOperation(function () {
style.webkitTransitionProperty = properties.join(', ');
style.webkitTransitionDuration = durations.join(', ');
for (var i = 0; i < properties.length; i++) {
style.setProperty(properties[i], params.to[i], '');
}
});
}
};
// adds a new operation to the set of instant operations
Transitions.prototype.addInstantOperation = function (new_operation) {
var previousInstantOperations = this.instantOperations;
this.instantOperations = function () {
previousInstantOperations();
new_operation();
};
};
// adds a new operation to the set of deferred operations
Transitions.prototype.addDeferredOperation = function (new_operation) {
var previousDeferredOperations = this.deferredOperations;
this.deferredOperations = function () {
previousDeferredOperations();
new_operation();
};
};
// called in order to launch the current group of transitions
Transitions.prototype.apply = function () {
this.instantOperations();
var _this = this;
setTimeout(_this.deferredOperations, 0);
};
|
