1
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15
/**
16
 * @fileoverview CSS3 transition base library.
17
 *
18
 * @author [email protected] (Chris Henry)
19
 */
20

21
goog.provide('goog.fx.css3.Transition');
22

23
goog.require('goog.Timer');
24
goog.require('goog.asserts');
25
goog.require('goog.fx.TransitionBase');
26
goog.require('goog.style');
27
goog.require('goog.style.transition');
28

29

30

31
/**
32
 * A class to handle targeted CSS3 transition. This class
33
 * handles common features required for targeted CSS3 transition.
34
 *
35
 * Browser that does not support CSS3 transition will still receive all
36
 * the events fired by the transition object, but will not have any transition
37
 * played. If the browser supports the final state as set in setFinalState
38
 * method, the element will ends in the final state.
39
 *
40
 * Transitioning multiple properties with the same setting is possible
41
 * by setting Css3Property's property to 'all'. Performing multiple
42
 * transitions can be done via setting multiple initialStyle,
43
 * finalStyle and transitions. Css3Property's delay can be used to
44
 * delay one of the transition. Here is an example for a transition
45
 * that expands on the width and then followed by the height:
46
 *
47
 * <pre>
48
 *   var animation = new goog.fx.css3.Transition(
49
 *     element,
50
 *     duration,
51
 *     {width: 10px, height: 10px},
52
 *     {width: 100px, height: 100px},
53
 *     [
54
 *       {property: width, duration: 1, timing: 'ease-in', delay: 0},
55
 *       {property: height, duration: 1, timing: 'ease-in', delay: 1}
56
 *     ]
57
 *   );
58
 * </pre>
59
 *
60
 * @param {Element} element The element to be transitioned.
61
 * @param {number} duration The duration of the transition in seconds.
62
 *     This should be the longest of all transitions.
63
 * @param {Object} initialStyle Initial style properties of the element before
64
 *     animating. Set using {@code goog.style.setStyle}.
65
 * @param {Object} finalStyle Final style properties of the element after
66
 *     animating. Set using {@code goog.style.setStyle}.
67
 * @param {goog.style.transition.Css3Property|
68
 *     Array<goog.style.transition.Css3Property>} transitions A single CSS3
69
 *     transition property or an array of it.
70
 * @extends {goog.fx.TransitionBase}
71
 * @constructor
72
 * @struct
73
 */
74
goog.fx.css3.Transition = function(
75
    element, duration, initialStyle, finalStyle, transitions) {
76
  goog.fx.css3.Transition.base(this, 'constructor');
77

78
  /**
79
   * Timer id to be used to cancel animation part-way.
80
   * @private {number}
81
   */
82
  this.timerId_;
83

84
  /**
85
   * @type {Element}
86
   * @private
87
   */
88
  this.element_ = element;
89

90
  /**
91
   * @type {number}
92
   * @private
93
   */
94
  this.duration_ = duration;
95

96
  /**
97
   * @type {Object}
98
   * @private
99
   */
100
  this.initialStyle_ = initialStyle;
101

102
  /**
103
   * @type {Object}
104
   * @private
105
   */
106
  this.finalStyle_ = finalStyle;
107

108
  /**
109
   * @type {Array<goog.style.transition.Css3Property>}
110
   * @private
111
   */
112
  this.transitions_ = goog.isArray(transitions) ? transitions : [transitions];
113
};
114
goog.inherits(goog.fx.css3.Transition, goog.fx.TransitionBase);
115

116

117
/** @override */
118
goog.fx.css3.Transition.prototype.play = function() {
119
  if (this.isPlaying()) {
120
    return false;
121
  }
122

123
  this.onBegin();
124
  this.onPlay();
125

126
  this.startTime = goog.now();
127
  this.setStatePlaying();
128

129
  if (goog.style.transition.isSupported()) {
130
    goog.style.setStyle(this.element_, this.initialStyle_);
131
    // Allow element to get updated to its initial state before installing
132
    // CSS3 transition.
133
    this.timerId_ = goog.Timer.callOnce(this.play_, undefined, this);
134
    return true;
135
  } else {
136
    this.stop_(false);
137
    return false;
138
  }
139
};
140

141

142
/**
143
 * Helper method for play method. This needs to be executed on a timer.
144
 * @private
145
 */
146
goog.fx.css3.Transition.prototype.play_ = function() {
147
  // This measurement of the DOM element causes the browser to recalculate its
148
  // initial state before the transition starts.
149
  goog.style.getSize(this.element_);
150
  goog.style.transition.set(this.element_, this.transitions_);
151
  goog.style.setStyle(this.element_, this.finalStyle_);
152
  this.timerId_ = goog.Timer.callOnce(
153
      goog.bind(this.stop_, this, false), this.duration_ * 1000);
154
};
155

156

157
/** @override */
158
goog.fx.css3.Transition.prototype.stop = function() {
159
  if (!this.isPlaying()) return;
160

161
  this.stop_(true);
162
};
163

164

165
/**
166
 * Helper method for stop method.
167
 * @param {boolean} stopped If the transition was stopped.
168
 * @private
169
 */
170
goog.fx.css3.Transition.prototype.stop_ = function(stopped) {
171
  goog.style.transition.removeAll(this.element_);
172

173
  // Clear the timer.
174
  goog.Timer.clear(this.timerId_);
175

176
  // Make sure that we have reached the final style.
177
  goog.style.setStyle(this.element_, this.finalStyle_);
178

179
  this.endTime = goog.now();
180
  this.setStateStopped();
181

182
  if (stopped) {
183
    this.onStop();
184
  } else {
185
    this.onFinish();
186
  }
187
  this.onEnd();
188
};
189

190

191
/** @override */
192
goog.fx.css3.Transition.prototype.disposeInternal = function() {
193
  this.stop();
194
  goog.fx.css3.Transition.base(this, 'disposeInternal');
195
};
196

197

198
/**
199
 * Pausing CSS3 Transitions in not supported.
200
 * @override
201
 */
202
goog.fx.css3.Transition.prototype.pause = function() {
203
  goog.asserts.assert(false, 'Css3 transitions does not support pause action.');
204
};
205

206