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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Utility methods to deal with CSS3 transitions
* programmatically.
*/
goog.provide('goog.style.transition');
goog.provide('goog.style.transition.Css3Property');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('goog.userAgent');
/**
* A typedef to represent a CSS3 transition property. Duration and delay
* are both in seconds. Timing is CSS3 timing function string, such as
* 'easein', 'linear'.
*
* Alternatively, specifying string in the form of '[property] [duration]
* [timing] [delay]' as specified in CSS3 transition is fine too.
*
* @typedef { {
* property: string,
* duration: number,
* timing: string,
* delay: number
* } | string }
*/
goog.style.transition.Css3Property;
/**
* Sets the element CSS3 transition to properties.
* @param {Element} element The element to set transition on.
* @param {goog.style.transition.Css3Property|
* Array.<goog.style.transition.Css3Property>} properties A single CSS3
* transition property or array of properties.
*/
goog.style.transition.set = function(element, properties) {
if (!goog.isArray(properties)) {
properties = [properties];
}
goog.asserts.assert(
properties.length > 0, 'At least one Css3Property should be specified.');
var values = goog.array.map(
properties, function(p) {
if (goog.isString(p)) {
return p;
} else {
goog.asserts.assert(p && p.property && goog.isNumber(p.duration) &&
p.timing && goog.isNumber(p.delay));
return p.property + ' ' + p.duration + 's ' + p.timing + ' ' +
p.delay + 's';
}
});
goog.style.transition.setPropertyValue_(element, values.join(','));
};
/**
* Removes any programmatically-added CSS3 transition in the given element.
* @param {Element} element The element to remove transition from.
*/
goog.style.transition.removeAll = function(element) {
goog.style.transition.setPropertyValue_(element, '');
};
/**
* @return {boolean} Whether CSS3 transition is supported.
*/
goog.style.transition.isSupported = function() {
if (!goog.isDef(goog.style.transition.css3TransitionSupported_)) {
// Since IE would allow any attribute, we need to explicitly check the
// browser version here instead.
if (goog.userAgent.IE) {
goog.style.transition.css3TransitionSupported_ =
goog.userAgent.isVersion('10.0');
} else {
// We create a test element with style=-webkit-transition, etc.
// We then detect whether those style properties are recognized and
// available from js.
var el = document.createElement('div');
el.innerHTML = '<div style="-webkit-transition:opacity 1s linear;' +
'-moz-transition:opacity 1s linear;-o-transition:opacity 1s linear;' +
'transition:opacity 1s linear">';
var testElement = el.firstChild;
goog.style.transition.css3TransitionSupported_ =
goog.isDef(testElement.style.transition) ||
goog.isDef(testElement.style.WebkitTransition) ||
goog.isDef(testElement.style.MozTransition) ||
goog.isDef(testElement.style.OTransition);
}
}
return goog.style.transition.css3TransitionSupported_;
};
/**
* Whether CSS3 transition is supported.
* @type {boolean}
* @private
*/
goog.style.transition.css3TransitionSupported_;
/**
* Sets CSS3 transition property value to the given value.
* @param {Element} element The element to set transition on.
* @param {string} transitionValue The CSS3 transition property value.
* @private
*/
goog.style.transition.setPropertyValue_ = function(element, transitionValue) {
element.style.WebkitTransition = transitionValue;
element.style.MozTransition = transitionValue;
element.style.MSTransition = transitionValue;
element.style.OTransition = transitionValue;
element.style.transition = transitionValue;
};
|
